Search code examples
angularjsangularjs-ng-repeatangularjs-ng-show

angularjs - ng-show not working with ng-repeat

I have a variable set to true in ng-click but the div underneath is not displaying. I've followed 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>
Solution

  • I would advise you to use ng-init

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

    and after that

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

    Please see demo below

    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>