如何从 ng-repeat 中删除这个 li 元素？

Question

在我的列表下方，底部的 div 之一具有 removePortfolio 函数。该函数的作用是激活ng-hide="tickerRemoved"，但仅针对该 1 个列表项，而不是所有列表项。

HTML 要点： https://gist.github.com/leongaban/cf72e5d0229155dd011f
指令要点： https://gist.github.com/leongaban/22a8feb9dbeea0b90135

<ul ng-show="loadingTickersDone" class="tickers-list">

    <li class="ticker-li"
        ng-repeat="ticker in tickers"
        ng-hide="tickerRemoved"
        ng-class="{'selected':toggleTicker.item == $index}"
        ng-mouseleave="hideTickerOptions()">

        <div class="ticker"
             ng-click="toggleTicker.item = $index;
                       selectTicker(ticker.ticker);
                       revealTickerOptions()">
             {{ticker.ticker}}
        </div>

        <div class="add-to-portfolio"
             ng-show="tickerOptions"
             ng-mouseleave="hideTickerOptions()">

             <div ng-show="addOption"
                  ng-click="addPortfolio(ticker.ticker)">+ Portfolio</div>
             <div ng-show="removeOption"
                  ng-click="removePortfolio(ticker.ticker)">- Portfolio</div>
        </div>
    </li>

</ul>

这是指令中的删除函数：

var vs = $scope;

vs.removePortfolio = function(ticker) {
    this.tickerOptions = false;
    ApiFactory.deleteWatchList(ticker).then(function(data) {
        showMessage(ticker+' removed from portfolio!', data.data.status);
        this.tickerRemoved = true;
    });
};

this.tickerRemoved = true; 出现错误我认为这是因为范围在链中较低？

例如，我在此函数中使用this，它工作正常，因为该函数在标记/范围内更高：

vs.revealTickerOptions = function() {
    this.tickerOptions = true;

    if (tickerView === 'all') {
        this.addOption    = true;
        this.removeOption = false;
    }
    else if (tickerView === 'port') {
        this.addOption    = false;
        this.removeOption = true;
    }
};

单击removePortfolio() 功能时，如何仅删除第一个<li class="ticker-li" 项目？

Answer 1

ng-hide="tickerRemoved" 应该是ng-hide="ticker.tickerRemoved"，因为tickerRemoved 是特定股票代码的属性。

与ng-show="tickerOptions"相同...从外观上看应该是ng-show="ticker.tickerOptions"。

ng-click="removePortfolio(ticker.ticker)"> 应该是ng-click="removePortfolio(ticker)">，因为您可能想要传递整个ticker 对象。

之后，您将需要更新您的删除代码功能，这样的事情应该可以工作：

vs.removePortfolio = function(tickerObject) {
    var ticker = tickerObject.ticker
    tickerObject.tickerOptions = false;
    ApiFactory.deleteWatchList(ticker).then(function(data) {
        showMessage(ticker+' removed from portfolio!', data.data.status);
        tickerObject.tickerRemoved = true;
    });
};

作为一般观察，您似乎过于依赖this。 this 可能是一个非常令人困惑的关键字，只有在有充分理由这样做且不会在以后的代码维护期间造成混淆时才应该使用（在我看来）。