Question

我在这里说明了这个想法： 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>

但是这样的方式会慢得多吗？（想象一下，这个应用程序已经受到角度的影响，需要在$范围内观看成千上万的物品...这里的小事情很重要）

检查我的plunkr ...你能想到一个更好的方法吗...这不是jquery？ http://plnkr.co/edit/lPHWba9e4WqXmQLMmplv?p=info

Answer 1

我可能会被指责为异端但我不介意使用jQuery（或类似的）如果它有充分的理由。一些想法：

如果突出显示只是一种短暂的影响（在$.effect("highlight") - ref意义上 - 这不是这里的情况），我相信jQuery会是一个不错的选择优化。

如果您真的介意手表（一般情况下，当模型开始变大时），为什么不在应用于列表根目录的指令中实现此功能。一些伪代码解释：

<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");
});

（如haki评论）模型真的需要这么大吗？有没有办法避免它？是否需要权衡“使用jQuery和更少的手表” vs。“清洁代码和更多手表”值得吗？

这些只是对一个有趣且开放式问题的一些非常粗略的想法......实际上我开始写评论，但它很快就变得太长了。反正玩得开心！

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

1 个答案: