Question

我有以下角度ng-repeat：

  <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时，我希望它的类变为“活动”。

我该怎么做？我是否需要在范围中添加变量？

Answer 1

您可以在var activeTestimonial = $index;中设置TestimonialClipController变量。然后执行类似<a ng-class="active: isActiveTestimonial($index)">...</a>的操作，其中您有一个方法$scope.isActiveTestimonial = function ($index) { ... }，可将$index与activeTestimonial进行比较。

您的另一个选择是将您的列表转换为指令，然后直接使用该元素。

<my-testimonials data="{{model.testimonials}}"></my-testimonials>

app.directive('myTestimonials', function () {
    return {
        restrict: 'E',
        template: '<ul class="pager">' +
            '<li data-ng-repeat="testimonial in testimonials">' +
                '<a href="" ng-click="show($event)">...</a>' +
            '</li>' + 
        '</ul>',
        link: function (scope, elem, attrs) {
        scope.testimonials = attrs && attrs.data ? attrs.data || {};
        scope.show = show;      

        ////////////////////////////////////////////////////////////

        function show ($event) {
            elem.find('a').removeClass('active');
            $event.target.addClass('active');           
        }
    }
};

然后，您可以使用elem.find('a')在元素链中工作，这将是您show()方法中的操作。

例如：

用户点击链接，这会触发ng-click="show($event)"方法;
在function show ($event) { ... }方法中，您将首先从所有链接中删除.active课程：elem.find('a').removeClass('active');
现在将active类添加到使用function show ($event) { ... }，然后$event.target.addClass('active')等点击的当前链接。

Answer 2

我会建议：

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

工作人员：http://plnkr.co/edit/j3htG9O05FDqfusC3XG5?p=preview

ng-class通过angular编译到元素的类中。如果testimonial.active是真实的，则活动类将被添加到元素中。

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

ng-class：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

在show($index)方法中，您可以设置$scope.selectedIndex = $index，然后使用ng-class设置自己的.-active课程$scope.selectedIndex == $index

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

3 个答案: