在ng-repeat中突出显示一行的更有效方法?. .角的方式

A more efficient way to highlight a row in ng-repeat? ... the angular way

本文关键字：一行 有效 方法 方式 ng-repeat 显示      更新时间：2023-09-26

我已经在这里说明了这个想法:http://plnkr.co/edit/lPHWba9e4WqXmQLMmplv?p=info

想象一个用ng-repeat构建的项目列表…

      <tr ng-repeat="item in items">
           <td id="{{item.id}}">item.id</td>
      </tr>

我想让外部模块突出显示其中一行的方式。一种方法是使用jquery:

     function hilite(id){
        $('#'+id).css('background-color', '#f33');  
     }

角方向是什么?．.. 这里有一个选项:

      <tr ng-repeat="item in items">
           <td css="{{hiliteID==item.id && 'background:#f33;'}}" id="{{item.id}}">item.id</td>
      </tr>

但是这样不是更慢吗?(想象一下，在一个应用程序中，angular需要在$scope中监视成千上万的项，这已经让它不堪重负了……小事情很重要)

检查我的plunkr…你能想到更好的方法来做这件事吗?这不是jquery吗?http://plnkr.co/edit/lPHWba9e4WqXmQLMmplv?p=info

我可能会被指责为异端邪说，但我不介意使用jQuery(或类似的)，如果有很好的理由。一些想法:

  1. 如果高亮显示只是一个短暂的效果(在$.effect("highlight") - ref - 的意义上，这不是这里的情况)，我相信jQuery将是一个很好的优化选择。

  2. 如果你真的介意手表(当模型开始变大时，你应该这样做)，为什么不在应用于列表根的指令中实现这个功能呢?一些伪代码来解释:

    <tbody highlighter="some.expression.here">
    <tr ng-repeat="item in items">
        <td id="{{item.id}}">item.id</td>
    </tr>
</tbody>

    因此，highlighter指令不知怎么地知道通过应用单个监视来突出显示一行，例如(再次非常粗略的伪代码):

    // in the link(scope,elem) function:
scope.$watch("highlightedRowId", function(newval, oldval) {
    elem.find("#" + oldval).removeClass("highlighted");
    elem.find("#" + newval).addClass("highlighted");
});

  3. (如haki评论)模型真的需要这么大吗?有什么方法可以避免吗?是权衡"使用jQuery和更少的手表"与。"干净的代码和更多的手表"值得吗?

这些只是关于一个有趣的开放式问题的一些非常粗略的想法…事实上，我开始写评论，但很快就变得太长了。不管怎样，玩得开心!

相关文章：