angularjs - ng-show 不适用于 ng-repeat

angularjs - ng-show not working with ng-repeat

我在 ng-click 中将一个变量设置为 true,但下面的 div 没有显示。我关注了 this post but it looks like it doesnt work in maybe ng-repeat? Here's the plunker: http://plnkr.co/edit/90G1KAx9Fmf2SgRs5gYK?p=preview

angular.module('myAppApp', [])

    .controller('MainCtrl', function ($scope) {
        $scope.notes = [{
            id: 1,
            label: 'First Note',
            done: false,
            someRandom: 31431
        }, {
            id: 2,
            label: 'Second Note',
            done: false
        }, {
            id: 3,
            label: 'Finished Third Note',
            done: true
        }];



        $scope.reach= function (id) {
            //the assignment below works
            //$scope.flag = true;
            alert("hello there");
        };


});



<div ng-app="myAppApp">
    <div ng-controller="MainCtrl">
      <div ng-repeat="note in notes">
        {{note.id}} - {{note.label}} -
        <a href="#" ng-click="flag = true;reach(111);">click me</a>

      </div>

      <div class="row" id="" ng-show="flag">I'm Here</div>
    </div>
  </div>

应该是ng-click="$parent.flag = true;reach(111);"

<a href="#" ng-click="flag = true;reach(111);">click me</a>

Outside ng-repeat

您的问题不清楚,您可以在 ng-repeat 中使用 ng-repeat,方法是在 ng-repeat 父作用域中维护变量。并使用 ng-repeat

中的 $parent. 注释访问父作用域
  <div ng-repeat="note in notes">
    {{note.id}} - {{note.label}} -
    <a href="#" ng-click="$parent.selected = note.id;reach(111);">click me</a>
    <div class="row" id="" ng-show="$parent.selected == note.id">I'm Here</div>
  </div>
</div>

Inside ng-repeat

我建议你使用ng-init

<div ng-repeat="note in notes" ng-init="parent=$parent">

之后

<a href="#" ng-click="parent.flag = true;reach(111);">click me</a>

请看下面的演示

angular.module('myAppApp', [])

.controller('MainCtrl', function($scope) {
  $scope.notes = [{
    id: 1,
    label: 'First Note',
    done: false,
    someRandom: 31431
  }, {
    id: 2,
    label: 'Second Note',
    done: false
  }, {
    id: 3,
    label: 'Finished Third Note',
    done: true
  }];



  $scope.reach = function(id) {
    //$scope.flag = true;
    alert("hello there");
  };


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

<body>
  <div ng-app="myAppApp">
    <div ng-controller="MainCtrl">
      <div ng-repeat="note in notes" ng-init="parent=$parent">
        {{note.id}} - {{note.label}} -
        <a href="#" ng-click="parent.flag = true;reach(111);">click me</a>

      </div>

      <div class="row" id="" ng-show="flag">I'm Here</div>
    </div>
  </div>
</body>