angularjs - ng-show 不能与 ng-repeat 一起使用答案

【问题标题】：angularjs - ng-show not working with ng-repeatangularjs - ng-show 不能与 ng-repeat 一起使用
【发布时间】：2015-04-01 16:09:19
【问题描述】：

我在 ng-click 中有一个变量设置为 true，但下面的 div 没有显示。我关注了this post，但它似乎在 ng-repeat 中不起作用？这是 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>

【问题讨论】：

标签： angularjs ng-repeat angularjs-ng-show

【解决方案1】：

应该是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

【讨论】：

【解决方案2】：

我建议你使用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>

【讨论】：