нг-клик не распознает $ индекс

Question

{{вкладка}} должна измениться, когда нажмите на <a ng-click>, к сожалению, это не меняет значение вкладка из $index

(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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui' 
 
    }]; 
 
    }); 
 
})();

.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; 
 
}

<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 as 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>

Answer 1

В вашем примере кода, вы объявили tab переменную сразу после ng-app. ng-controller делает дочерний масштаб таким образом внутри ng-controller Элемент tab на самом деле $parent.tab, ng-repeat делает другого ребенка (он же изолированный), поэтому, если вы измените tab в своем коде на $parent.$parent.tab, вы можете получить к нему доступ. Лучшая практика - просто перемещать элемент, который показывает активную вкладку внутри ng-controller и присоединяет ее к самому контроллеру. Как вы можете видеть в моем примере кода.

(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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui' 
 
    }]; 
 
    }); 
 
})();

.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; 
 
}

<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 as testimonialList"> 
 
    <p><strong ng-init="testimonialList.tab = 5" >Status : {{testimonialList.tab}}</strong></p> 
 
    <hr> 
 
    <div class="position" ng-repeat="role in testimonialList.role track by $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>

Я надеюсь, что это помогает. С уважением.

Answer 2

Не объявляйте примитивные типы непосредственно в области видимости, потому что они могут быть переопределены дочерними областями. Для получения дополнительной информации: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

(function() { 
 
    // Angular 
 
    var app = angular.module('app', []); 
 
    app.controller('testimonialController', function() { 
 
    this.model = { }; 
 
    this.role = [{ 
 
     'temeperiod': 'Sep 2009 -<br> Sep 2010', 
 
     'position': 'Developer', 
 
     'company': 'Company', 
 
     'location': 'London, United Kingdom', 
 
     'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad 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 amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui' 
 
    }]; 
 
    }); 
 
})();

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-init="model.tab = 5"> 
 
    <p><strong>Status : {{model.tab}}</strong></p> 
 
    <hr> 
 
    <section class="timeline" ng-controller="testimonialController as testimonialList"> 
 
    <div class="position" ng-repeat="role in testimonialList.role"> 
 
     <div class="date">Role index {{$index}}</div> 
 
     <a href class="circle" ng-click="model.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>