angularjs - ng-show not working with ng-repeat -


i have variable set true in ng-click div underneath not displaying. i've followed this post looks doesnt work in maybe ng-repeat? here's 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>

i advise 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>


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more