如何结合 ng-class 检查和 ng-click 比较？

Question

我有一个 ng-repeat，其中第一个项目需要选择 class，然后单击每个项目然后更改选择。

<li ng-repeat="ticker in tickers"
    data-ng-class="{'selected':$first}"
    ng-click="selectTicker(ticker.ticker)">{{ticker.ticker}}</li>

^ 这可以使第一项默认具有 selected 的 class。

<li ng-repeat="ticker in tickers"
    data-ng-click="toggleTicker.item = $index"
    data-ng-class="{'selected':toggleTicker.item == $index}"
    ng-click="selectTicker(ticker.ticker)">{{ticker.ticker}}</li>

^ 感谢 this question。以上工程是根据点击添加selected的class，但是默认不再选中第一项

我的问题是如何将两者结合起来？我试过以下方法，但没有用：

data-ng-class="{'selected':$first && toggleObject.item == $index}"

我的控制器：

var vs = $scope;

ApiFactory.getWatchList().then(function(data) {
    vs.tickers = data.data.tickers;
    vs.toggleTicker = {item: -1};
    vs.toggleTicker.item = vs.tickers[0];
    vs.loadingDone = true;
    console.log(vs.tickers[0]);
});

Answer 1

这不是在 ng-class 中完成的，而是在控制器或 ng-init 中完成的：

data-ng-init="toggleObject.item = tickers[0]" 
data-ng-class="{'selected':toggleObject.item == $index}"

我还是建议你在controller里面做。

Answer 2

您正在将 item 初始化为控制器中索引 0 处的对象，但在其他任何地方它似乎都是一个数字。如果你只想使用索引（因为你的点击将它设置为数字），那么试试这个：

var vs = $scope;

ApiFactory.getWatchList().then(function(data) {
    vs.tickers = data.data.tickers;
    vs.toggleTicker = {item: 0}; // set index 0 as the selected index
    vs.loadingDone = true;
    //console.log(vs.tickers[0]); // what if there are no items?
});

html:

<li ng-repeat="ticker in tickers"
    data-ng-click="toggleTicker.item = $index"
    data-ng-class="{'selected':toggleTicker.item == $index}"
    {{ticker.ticker}}
</li>

使用 $first 是不好的，因为相同的项目总是是第一个（除非您重新订购）。使用 ng-click 和 data-ng-click 是不好的，因为它们本质上是相同的，也许实际上只有一个会被调用？

如何结合 ng-class 检查和 ng-click 比较？

How to combine ng-class checks and ng-click comparisons?

javascript

angularjs

angularjs-ng-click

angularjs-ng-class