javascript - ng-click does not recognize the $index -

javascript - ng-click does not recognize the $index -

{{tab}} should alter when click on <a ng-click> unfortunately not alter tab value $index

class="snippet-code-js lang-js prettyprint-override">(function() { // angular var app = angular.module('app', []); app.controller('testimonialcontroller', function() { this.role = [{ 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'front end developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'web developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'web developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }]; }); })(); class="snippet-code-css lang-css prettyprint-override">.position { position: relative; } .circle { width: 25px; height: 25px; display: block; color: #fff; cursor: pointer; text-align: center; text-decoration: none; position: absolute; left: 0; right: 0; margin: auto; margin-top: 10px; font-size: 20px; background-color: red; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-init="tab = 5"> <p><strong>status : {{tab}}</strong></p> <hr> <section class="timeline" ng-controller="testimonialcontroller testimoniallist"> <div class="position" ng-repeat="role in testimoniallist.role"> <div class="date">role index {{$index}}</div> <a href class="circle" ng-click="tab = {{$index}}">+</a> <div class="position-description"> <h2 class="position-title">{{role.position}}</h2> <h4 class="company">{{role.company}}</h4> <h5 class="location">{{role.location}}</h5> <div class="responsibilities"> <p>{{role.description}}</p> </div> </div> <hr> </div> </section> </div>

in code sample, declared tab variable right after ng-app. ng-controller makes kid scope within of ng-controller element tab $parent.tab, ng-repeat makes kid (aka isolated) scope if alter tab in code $parent.$parent.tab can access it. improve practice move element shows active tab within ng-controller , attach controller itself. can see in code sample.

class="snippet-code-js lang-js prettyprint-override">(function() { // angular var app = angular.module('app', []); app.controller('testimonialcontroller', function() { this.role = [{ 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'front end developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'web developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }, { 'temeperiod': 'sep 2009 -<br> sep 2010', 'position': 'web developer', 'company': 'company', 'location': 'london, united kingdom', 'description': 'lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor cididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam,proident, sunt in culpa qui' }]; }); })(); class="snippet-code-css lang-css prettyprint-override">.position { position: relative; } .circle { width: 25px; height: 25px; display: block; color: #fff; cursor: pointer; text-align: center; text-decoration: none; position: absolute; left: 0; right: 0; margin: auto; margin-top: 10px; font-size: 20px; background-color: red; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <section class="timeline" ng-controller="testimonialcontroller testimoniallist"> <p><strong ng-init="testimoniallist.tab = 5" >status : {{testimoniallist.tab}}</strong></p> <hr> <div class="position" ng-repeat="role in testimoniallist.role track $index"> <div class="date">role index {{$index}}</div> <a href class="circle" ng-click="testimoniallist.tab = $index">+</a> <div class="position-description"> <h2 class="position-title">{{role.position}}</h2> <h4 class="company">{{role.company}}</h4> <h5 class="location">{{role.location}}</h5> <div class="responsibilities"> <p>{{role.description}}</p> </div> </div> <hr> </div> </section> </div>

i hope helps. regards.

javascript angularjs indexing angularjs-ng-click