Angularjs 使列表中的项目处于活动状态

我重复以下内容：

  <div data-ng-controller="TestimonialClipController">

    <ul class="pager">
      <li data-ng-repeat="testimonial in model.testimonials">
        <a href="" data-ng-click="show($index)"></a>
      </li>
    </ul>

    <!-- remaining code -->

  </div>

当我点击一个锚点A时，我希望它的类变成“活动的”

---

我该怎么做？是否需要向作用域中添加变量？

您可以设置一个

var-activetestional=$indexclipcontroller

中的code>变量。然后执行类似于

”的操作+
“”+
“”，
链接：功能（范围、要素、属性）{
scope.estimonials=attrs&&attrs.data？attrs.data | |{}；
scope.show=show；
////////////////////////////////////////////////////////////
功能展示（$event）{
元素find（'a'）。removeClass（'active'）；
$event.target.addClass（'active'）；
}
}
};

然后，您可以使用

elem.find（'a'）

围绕元素链工作，这将是

show（）

方法中的一个操作

例如：

用户单击一个链接，这将触发

ng click=“show（$event）”

方法

在

函数show（$event）{…}

方法中，首先从所有链接中删除

.active

类：

elem.find（'a'）.removeClass（'active'）

现在，将

active

类添加到当前链接，该链接使用类似于

函数show（$event）{…}

的方法单击，然后添加

$event.target.addClass（'active'）

我建议：

<div data-ng-controller="TestimonialClipController">

    <ul class="pager">
      <li data-ng-repeat="testimonial in model.testimonials">
        <a href="" data-ng-click="show(testimonial)" ng-class="{'active':testimonial.active}"></a>
      </li>
    </ul>

    <script>
      app.controller('TestimonialClipController',function($scope,$log) {
        $scope.model.testimonials = []
        $scope.show = function(testimonial) {
          testimonial.active = !testimonial.active
        }
      })
    </script>

  </div>

应用程序控制器（'CertificationClipController'，函数（$scope，$log）{
$scope.model.commentials=[]
$scope.show=功能（推荐）{
推荐的.active=！推荐的.active
}
})

工作冲击器：

ng类通过angular编译成元素上的类。如果estimential.active是truthy，则会将类active添加到元素中

如果所有元素都将开始处于非活动状态，然后在单击时变为活动状态，则可能需要初始化活动元素，或者在适当的情况下使用web服务器进行设置

---

ng类：

在

显示（$index）

方法中，您可以设置

$scope.selectedIndex=$index

，如果

$scope.selectedIndex==$index

您需要使用

:active

还是可以使用自己的类

-active

？@SamJacobs我可以使用自己的类…好的，请看下面我的答案：）与其他答案所说的差不多：p

<div data-ng-controller="TestimonialClipController">

    <ul class="pager">
      <li data-ng-repeat="testimonial in model.testimonials">
        <a href="" data-ng-click="show(testimonial)" ng-class="{'active':testimonial.active}"></a>
      </li>
    </ul>

    <script>
      app.controller('TestimonialClipController',function($scope,$log) {
        $scope.model.testimonials = []
        $scope.show = function(testimonial) {
          testimonial.active = !testimonial.active
        }
      })
    </script>

  </div>