Question

所以基本上我使用ng-repeat创建了这个菜单，它在数组中显示了一个对象的字段。然后，当我点击其中一个显示的字段时，我想制作另一个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;
        };

因此，如果用户点击该集合，则会重复该集合名称下方的所有书籍。如果再次点击同一个集合，则所有这些都会再次隐藏。如果在点击集合后点击一本书，我希望它将值设置为！值。将值设置为true或false必须适用于集合和书籍。

谢谢：）

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

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

Answer 3

我已经按照您的意愿创建了一个演示，您只需要更改一些代码。

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

3 个答案: