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

Question

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

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

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

<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的类，但默认不再选择第一项。

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

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

您正在将 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 不好，因为它们本质上是相同的，也许只有一个会真正被调用？

Answer 2

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

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

我还是建议你在控制器里做。