使用 jquery 将类添加到 ng-repeat 中的第一项

Question

我是复杂指令的新手，我正在尝试使用 jquery 向 ng-repeat 中的第一项添加一个类（不幸的是我的项目正在使用它），就像在指令的控制器中一样：

   var highlightFirst = function(){
      $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
      console.log('in here')
    }

    highlightFirst();

    //also tried this:
    angular.element(document).ready(function(){
      $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
      console.log('in here')
    });

我之后立即调用该函数。什么都没发生。

当我运行$('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); 在 chrome 开发工具中，我想要加粗的实际上是加粗的......为了让这个特定的解决方案正常工作，我缺少什么？什么是最好的角度方法？

Answer 1

你实际上并不需要 jquery 并且应该尽可能避免在 Angular 应用程序中使用 jquery，你应该使用 ng-class 和 $first 这里是工作 demo

<ul>
    <li ng-repeat="item in items" ng-class="{'fooClass': $first}">{{ item }}</li>
</ul>

$first 的好处是当您对ng-repeat 进行排序时，它仍然可以正常工作。

Answer 2

只需使用 ng-class：

<ul>
    <li ng-repeat="item in items" ng-class="{'myClass': item == items[0]}">{{ item.property }}</li>
</ul>

编辑：链接到更多详细信息

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

让我们试试这个：

$(document).ready(function(){
  $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
  console.log('in here');
});

关于你的第一种方式：

var highlightFirst = function(){
  $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
  console.log('in here');
};

highlightFirst();

我应该说你应该确保你的代码是在页面和元素加载之后运行的。