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

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

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

我仍然建议你在控制器中这样做。

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比较？

2 个答案: