Question

我正在尝试显示/隐藏div元素。因此它将列出一个hopspital，然后当它被点击时，它应该使用angularjs显示以下信息。如果我删除＆＃39; ng-repeat =＆＃34; x in data＆＃34; ng-if =＆＃34; x.collegeID == returnSchool（）＆＃34;＆＃39;下拉效果将起作用，但显然没有来自我的JSON对象的数据。如果我删除＆＃39; class =＆＃34; drop-panel animated fadeIn＆＃34;＆＃39;那么您不需要点击医院名称，所有信息都会显示给您（没有下拉效果）。我无法弄清楚我做错了什么。我只是希望能够点击医院名称，然后将与该医院相关的信息显示在其下方。

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;
}

Answer 1

尝试将ng-if更改为ng-show。只有当用户点击它时，ng-if才会将元素添加到DOM中，这意味着它可能会破坏样式的显示/隐藏行为。

Answer 2

我最后使用ng-show命令解决了这个问题，但我并没有用ng-show切换ng-if。我最终摆脱了div中的drop-panel css类，并添加了＆＃39; ng-click =＆＃34; showDetails =！ showDetails＆＃34;＆＃39;然后和＆＃39; ng-show =＆＃34; showDetails＆＃34;＆＃39;，它会在点击div时打开和关闭。

来自此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 -->

Div没有正确显示angularjs

2 个答案: