如何将 class 设置为已使用 orderBy 排序的 ng-repeat 中的第一项？

Question

我有一个未排序的项目列表，我使用 orderBy 按名称字母数字排序。

<li class="ticker-li"
    ng-repeat="ticker in tickers | orderBy:'ticker'"
    ng-class="{'selected':ticker.selected}">

    <div class="ticker"
         ng-click="unselectAll(); ticker.selected = !ticker.selected;
         selectTicker(ticker);
         revealTickerOptions()">
         {{ticker.ticker}}
    </div>

现在在我的控制器中，这就是我当前设置第一个选定项目的方式 class:

var vs = $scope;
vs.tickers = data;
vs.tickers[0].selected = true;

^ 在我需要添加 orderBy 以便项目按 alpha 顺序显示之前，这一直很有效：

我找到了 this answer here，但是它锁定第一个项目总是有 class。

稍微修改一下我的代码，我可以让其他按钮在点击时获得 class，但是 $first 项目仍然与 class 保持一致。

ng-class="{'selected':$first || ticker.selected}"

在我的控制器中，这是我的 unselectAll 函数，它不适用于 'selected':$first:

vs.unselectAll = function() {
    for (var i = 0; i < vs.tickers.length; i++) {
        vs.tickers[i].selected = false;
    }
};

标记或控制器中的代码需要如何更新才能解决此问题？

Answer 1

试一试，我不确定它如何读取排序依据上的 $index，但去掉 $first 并将此 init 语句放在那里。

<li class="ticker-li"
    ng-repeat="ticker in tickers | orderBy:'ticker'" 
    ng-init="$index ? ticker.selected = false : ticker.selected = true"
    ng-class="{'selected':ticker.selected}" ng-click="unselectFirst($index)">

我认为这是黑客攻击与否之间的灰色地带，从技术上讲，您并没有在 ng-init 中为属性添加别名，但我认为这是一条很好的路线。另一种解决方案是在控制器中对数组进行排序，文档中有一个按字母顺序排序的示例，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

如何将 class 设置为已使用 orderBy 排序的 ng-repeat 中的第一项？

How to set class to first item in ng-repeat that has been sorted with orderBy?

angularjs

angularjs-ng-repeat

angularjs-ng-class