使用 ng-click 激活 ng-repeat

Question

所以基本上我使用 ng-repeat 创建了这个菜单，它在数组中显示了一个 objects 的字段。然后，当我单击其中一个显示的字段时，我想创建另一个 ng-repeat 来将其他字段推送到下方。我只想在点击时激活第二个 ng-repeat ，如果用户再次点击则撤消。意思是，ng-repeat 只会在用户点击按钮后出现。

我应该如何执行这个有什么想法吗？

<div ng-repeat="collection in library" ng-click="setCollection(collection)">
          <li class="list-group-item">{{collection.Collection}}</li>
</div>

这里我有一些来自 JS 文件的代码

$scope.library = [
            {
                Collection: "Harry Potter",
                value: false,
                books: [
                    {
                        book: "Sorcerer Stone",
                        value: false                        
                    },
                    {
                        book: "Goblet of Fire",
                        value: false,
                    }
                ]
            },
            {
                Collection: "LOTR",
                value: false,
                books: [
                    {
                        book: "Two Towers",
                        value: false                        
                    },
                    {
                        book: "Return of the King",
                        value: false,
                    }
                ]
            }
        ];

        $scope.setCollection = function(collection){
            collection.value = !collection.value;
        };

因此，如果用户单击 collection，它 ng-repeat 就是 collection 名称下方的所有书籍。如果再次点击同一个 collection，它们都会再次隐藏。如果在点击 collection 之后再点击一本书，我希望它将值设置为 !value。将值设置为 true 或 false 必须适用于 collections 和书籍。

谢谢:)

Answer 1

假设您有：

<ul ng-hide="someVariable">
    <li ng-repeat="foo in bar"></li>
</ul>

然后在 ng-click 发生的任何地方执行此操作：

<button ng-click="showStuff()">Show Hidden Stuff!</button>

在你的控制器中执行此操作：

$scope.someVariable = true;
$scope.showStuff = function(){
    If($scope.someVariable){
        $scope.someVariable = false;
  } else {
        $scope.someVariable = true;
   } 
}

Answer 2

也许做这样的事情：

<div ng-controller="TestController as ctrl">
  <ul class="menu">

    <li ng-repeat="item in ctrl.menu.items">
      <a ng-click="ctrl.openSubmenu(item)">{{item.label}}</a>

      <ul class="submenu"
          ng-if="item.submenuIsOpen">

        <!-- Submenu content right here -->

      </ul>
    </li>

  </ul>
 </div>

// On your controller
var vm = this;

// Set the menu object with items
vm.menu = {
  items: [
    {
      label: 'Item 1',
      submenuIsOpen: false
    },
    {
      label: 'Item 1',
      submenuIsOpen: false
    }
  ]
}

// Then create the open submenu function
vm.openSubmenu = function(item) {
  item.submenuIsOpen = !item.submenuIsOpen;
}

正如@codeninja 指出的那样，您也可以使用 $scope。

Answer 3

我已经按照你的要求制作了一个demo，你只需要改一点代码就可以了。

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.title = 'Welcome varun';
  $scope.mainMenu = [{
    title: 'A',
    subMenu: ['A1', 'A2'],
    subMenuDisplay: false
  }, {
    title: 'B',
    subMenu: ['B1', 'B2', 'B3'],
    subMenuDisplay: false
  }, {
    title: 'C',
    subMenu: ['C1', 'C2'],
    subMenuDisplay: false
  }];

  $scope.toggle = function(menu) {
    menu.subMenuDisplay = !menu.subMenuDisplay;
  };
}

.menu {
  min-width: 50px;
  min-height: 30px;
  background: grey;
  border: 2px solid black;
  cursor:pointer;
}
.subMenu {
    min-width: 50px;
    min-height: 30px;
    background: magenta;
    border: 2px solid black;
    cursor:auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp" ng-controller="MyCtrl">
  <div>
    {{title}}
  </div>
  <div>
    <div class='menu' ng-repeat='menu in mainMenu' ng-click='toggle(menu)'>
      {{menu.title}}
      <div class='subMenu' ng-repeat='sub in menu.subMenu' ng-show='menu.subMenuDisplay' ng-click='$event.stopPropagation()'>
        {{sub}}
      </div>
    </div>
  </div>

</body>

使用 ng-click 激活 ng-repeat

activate ng-repeat using ng-click

angularjs

q

angularjs-ng-repeat

angularjs-ng-click