angularjs - ng-show不使用ng-repeat

时间:2015-04-01 16:09:19

标签: angularjs ng-repeat angularjs-ng-show

我在 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>

2 个答案:

答案 0 :(得分: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父范围内维护变量。并使用$parent.

中的ng-repeat注释访问父作用域
  <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

答案 1 :(得分:0)

我建议你使用ng-init

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

之后

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

请参阅下面的演示

&#13;
&#13;
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");
  };


});
&#13;
<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>
&#13;
&#13;
&#13;