javascript - ng-click 无法识别 $index

Question

{{tab}} 在点击 <a ng-click> 时应该改变不幸的是，它不会更改 $index 中的 tab 值

(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

不要直接在作用域上声明原始类型，因为它们可以被子作用域覆盖。更多信息: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>