单击“ng-repeat”元素时无法随机播放“ng-show”

Question

点击一个元素我会显示一个列表。以及单击相同的列表元素，我隐藏了列表。但是单击不隐藏父元素的列表元素。

这是片段。单击显示并单击列表元素之一。

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

app.controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.names = ["one", "click and hide ", "three"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
    <span ng-click="show = !show">Show me</span>
    <ul ng-show="show">
      <li ng-repeat="name in names" ng-click="show = !show">{{name}}</li> <!-- not hiding on click -->
    </ul>
  </div>

这里有什么问题？如何解决？

Answer 1

ng-repeat 创建一个新范围。你需要$parent.show = !$parent.show

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

app.controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.names = ["one", "click and hide ", "three"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
    <span ng-click="show = !show">Show me</span>
    <ul ng-show="show">
      <li ng-repeat="name in names" ng-click="$parent.show = !$parent.show;">{{name}}</li> <!-- not hiding on click -->
    </ul>
  </div>

Answer 2

<div ng-app="dropdown" ng-controller="MainCtrl">
<span ng-click="show = !show">Show me</span>
<ul ng-show="show">
  <li ng-repeat="name in names" ng-click="$parent.show = !$parent.show">{{name}}</li> <!-- not hiding on click -->
</ul>

有用吗？您必须调用父级的范围 :)

Answer 3

您可以声明为函数并从任何地方调用。所以你可以这样做：

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

app.controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.names = ["one", "click and hide ", "three"];
  $scope.toggle = function(){
      $scope.show = !$scope.show;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dropdown" ng-controller="MainCtrl">
    <span ng-click="toggle()">Show me</span>
    <ul ng-show="show">
      <li ng-repeat="name in names" ng-click="toggle()">{{name}}</li> <!-- Now this is hiding on click -->
    </ul>
  </div>

单击“ng-repeat”元素时无法随机播放“ng-show”

Not able to shuffle the `ng-show` on click of `ng-repeat` element

angularjs

angular-directive