使用 Angular 如何显示/隐藏 ng-repeat 中的 div答案

【问题标题】：Using Angular how to show/hide a div which is in ng-repeat使用 Angular 如何显示/隐藏 ng-repeat 中的 div
【发布时间】：2016-02-06 03:44:56
【问题描述】：

HTML Markup:
            <div ng-repeat="item in items">
                <div class="dropdown-menu" ng-click=itemsActive()>click me</div>
                <ul ng-show="itemVisible">
                    <li>item 1</li>
                    <li>item 2</li>
                </ul>
            </div>

 Controller code:
            $scope.itemVisible = false;
            $scope.itemsActive = function(){
            $scope.itemVisible = !$scope.itemVisible;
        }

上面是标记，在 ng-click 上我正在调用函数 itemsActive() 并且在控制器中我有一个范围变量 $scope.itemVisible = false。并且，通过分配 ng-show = "itemVisible"，最初不会显示项目下拉列表。因此，onclick 范围变量切换为真/假。但是，由于使用了 ng-repeat，所有重复项的“下拉菜单”div 也会被切换。如何实现为特定的 div 显示/隐藏 ul 项。

我编辑了我的代码 HTML 标记：

<div ng-repeat="item in items">
     <div class="dropdown-menu" ng-click="item.visible=!item.visible>"click me</div>
        <ul ng-show="itemVisible">
             <li>item 1</li>
              <li>item 2</li>
          </ul>
  </div>

现在，点击时，项目会打开/关闭。但是，单击第一项和第二项时，下拉菜单是可见的。如果我单击第一项并单击第二项，则应隐藏第一项？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以使用ng-if，并且仅在与特定项目不匹配时才显示 div：

<div ng-repeat="item in items">
 <div class="dropdown-menu" ng-if="item != 'specificItem'" ng-click="item.visible=!item.visible>"click me</div>
    <ul ng-show="itemVisible">
         <li>item 1</li>
          <li>item 2</li>
      </ul>

如果满足ng-if条件，则该块后面的html将显示，如果条件不满足，则不显示。

【讨论】：

【解决方案2】：

您可以先初始化该项目的属性，然后在单击时切换该特定属性

<div ng-repeat="item in items" ng-init="item.visible=true">
    <div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
    <ul ng-show="item.visible" >
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div>

演示：

angular.module('demo',[])
    .controller('demoCtrl',['$scope',function($scope){
        $scope.work = 'working';
        $scope.items = [{a:'a'},{a:'b'}];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
    <div ng-repeat="item in items" ng-init="item.visible=true">{{work}}
        <div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
        <ul ng-show="item.visible" >
            <li>{{item.a}}</li>
        </ul>
    </div>
</div>

【讨论】：