1

I am trying to show/hide a div element. So it will list a hopspital, and then when it is clicked, it should display the following information using angularjs. If I delete 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"' the dropdown effect will work, but obviously no data from my JSON object. If I delete 'class="drop-panel animated fadeIn"' then you don't need to click on the hospital name, all the information will be displayed for you (no dropdown effect). I can't quite figure out what I am doing wrong. I just want to be able to click on the hospital name, and then have the information associated with that hospital to display underneath it.

localHospital.html

<!-- resource start -->

        <div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">

            <!-- resource header & icon -->

            <div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>

            <!-- resource data -->

            <div class="drop-panel animated fadeIn">

                <!-- phone number -->

                <p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
                <a href="tel:{{x.hospitalPhoneNumber}}" target="_blank"><p class="resource-content">{{x.hospitalPhoneNumber}}</p></a>

                <!-- location -->

                <p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
                <a href="http://maps.google.com/?q={{x.hospitalAddress}}" target="_blank"><p class="resource-content">{{x.hospitalAddress}}</p></a>

                <!-- directions -->

                <p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
                <a href="{{x.hospitalDirections}}" target="_blank"><p class="resource-content">{{x.hospitalDirections}}</p></a>

            </div>

        </div>

<!-- resource end -->

style.css

.drop-panel {
display: none;
}

.drop-panel.show {
    display: block !important;
}

2 Answers2

0

Try changing ng-if to ng-show. ng-if will add the element to the DOM only when the user clicks on it, which means it could be screwing up the style's show/hide behavior.

Dr. Cool
  • 3,713
  • 3
  • 22
  • 26
0

I ended up solving it by using the ng-show command, but I didn't just switch the ng-if with ng-show. I ended up getting rid of the drop-panel css class in the div, and adding 'ng-click="showDetails = ! showDetails"' and then and 'ng-show="showDetails"', which would toggle on and off as the div was clicked.

It was from this Show hidden div on ng-click within ng-repeat

localHospitals.html

        <!-- resource start -->

        <div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">

            <!-- resource header & icon -->

            <div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>

            <!-- resource data -->

            <div class="animated fadeIn" ng-show="showDetails">

                <!-- phone number -->

                <p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
                <a href="tel:{{x.hospitalPhoneNumber}}" target="_blank"><p class="resource-content">{{x.hospitalPhoneNumber}}</p></a>

                <!-- location -->

                <p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
                <a href="http://maps.google.com/?q={{x.hospitalAddress}}" target="_blank"><p class="resource-content">{{x.hospitalAddress}}</p></a>

                <!-- directions -->

                <p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
                <a href="{{x.hospitalDirections}}" target="_blank"><p class="resource-content">{{x.hospitalDirections}}</p></a>

            </div>

        </div>

    <!-- resource end -->