Question

我希望仅在单击Descriptions锚标记时在p标记内显示{{x.description}}，并在单击其他链接时隐藏，并且我想在单击其他锚标记时显示ul。

我尝试过使用ng-show和ng-hide但它无法正常工作。

这是标记

<div class="modal" id="room_detail" ng-repeat="x in roomdata.data">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>{{x.room_type}} - {{current_Hotel.hotel_name}}</h3>
                <a href="">Descriptions</a>
                <a href="">Room Pictures</a>
                <a href="">Amenities</a>
                <a href="">Others</a>
            </div>

            <div class="modal-body">
                <p>{{x.description}}</p>
                <ul>
                    <li>Bed Type: {{x.bed_type}}</li>
                    <li>Room Size: {{x.room_size_value}} Square Meters</li>
                    <li>Room View Type: {{x.room_view_type}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

这应该有效

<div class="modal" id="room_detail" ng-repeat="x in roomdata.data">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>{{x.room_type}} - {{current_Hotel.hotel_name}}</h3>
                <a href="" ng-click="show = 'desc'">Descriptions</a>
                <a href="" ng-click="show = 'others'">Room Pictures</a>
                <a href="" ng-click="show = 'others'">Amenities</a>
                <a href="" ng-click="show = 'others'">Others</a>
            </div>

            <div class="modal-body">
                <p ng-show="show=='desc'">{{x.description}}</p>
                <ul ng-show="show=='others'">
                    <li>Bed Type: {{x.bed_type}}</li>
                    <li>Room Size: {{x.room_size_value}} Square Meters</li>
                    <li>Room View Type: {{x.room_view_type}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController);

MyController.$inject = [];

function MyController() {

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <div class="modal-header">
    <h3>heading3</h3>
    <a href="" ng-click="show = 'desc'">Descriptions</a>
    <a href="" ng-click="show = 'others'">Room Pictures</a>
    <a href="" ng-click="show = 'others'">Amenities</a>
    <a href="" ng-click="show = 'others'">Others</a>
  </div>

  <div class="modal-body">
    <p ng-show="show=='desc'">Description</p>
    <ul ng-show="show=='others'">
      <li>Bed Type: </li>
      <li>Room Size: Square Meters</li>
      <li>Room View Type: </li>
    </ul>
  </div>
</div>

＆＃13;

ng-show和ng-hide在多个锚标签上

1 个答案: