このli要素をng-repeatから削除するにはどうすればよいですか?

レオンガバン

以下の私のリストでは、下部のdivの1つに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>

ディレクティブのremove関数は次のとおりです。

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;
    }
};

関数を<li class="ticker-li"クリックしたときに1つのアイテムだけを削除するにはどうすればよいremovePortfolio()ですか?

AlexMA

ng-hide="tickerRemoved"あるべきng-hide="ticker.tickerRemoved"tickerRemovedは、特定のティッカーのプロパティからです。

ng-show="tickerOptions"...と同じようng-show="ticker.tickerOptions"に見えるはずです。

ng-click="removePortfolio(ticker.ticker)">ng-click="removePortfolio(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非常に紛らわしいキーワードになる可能性があり、(私の意見では)そうする正当な理由があり、そうすることで後のコードメンテナンス中に混乱が生じない場合にのみ使用する必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

要素のクラスをng-repeatから変更するにはどうすればよいですか?

分類Dev

これらのli要素を相互に設定するにはどうすればよいですか?

分類Dev

ng-repeat内のオブジェクトから要素を削除するにはどうすればよいですか?

分類Dev

javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

分類Dev

Angular js ng-repeatでキーの重複値を削除するにはどうすればよいですか?

分類Dev

csvから引用を削除するにはどうすればよいですか?

分類Dev

JFrameからJPanelを削除するにはどうすればよいですか?

分類Dev

通知から「+999」を削除するにはどうすればよいですか?

分類Dev

#を削除するにはどうすればよいですか?URLから

分類Dev

画像から背景を削除するにはどうすればよいですか?

分類Dev

GoogleChromeからRamblerを削除するにはどうすればよいですか

分類Dev

多数から改行を削除するにはどうすればよいですか?

分類Dev

UIScrollViewからCAShapeLayerを削除するにはどうすればよいですか?

分類Dev

APNSConfigurationからmachinekeysetを削除するにはどうすればよいですか?

分類Dev

QWidgetからQPaletteを削除するにはどうすればよいですか

分類Dev

行から括弧を削除するにはどうすればよいですか?

分類Dev

URLShopifyから/ pagesを削除するにはどうすればよいですか?

分類Dev

削除できないこれらのエラーを削除するにはどうすればよいですか?

分類Dev

リストからいくつかの要素を削除するにはどうすればよいですか?

分類Dev

これらの余分な矢印を出力から削除するにはどうすればよいですか?

分類Dev

1つのXML要素からすべての属性を削除するにはどうすればよいですか?

分類Dev

AngularJSを使用してng-repeat内の配列からオブジェクトを削除するにはどうすればよいですか?

分類Dev

配列からすべてのリスト要素を削除するにはどうすればよいですか?

分類Dev

配列からすべての非数値要素を削除するにはどうすればよいですか?

分類Dev

Firestore配列から複数の要素を動的に削除するにはどうすればよいですか?

分類Dev

ListViewから項目を削除し、Firebaseからも削除するにはどうすればよいですか?

分類Dev

Microsoft WordのIEEE引用から角かっこを削除するにはどうすればよいですか?

分類Dev

sqlalchemyからクエリ結果のかっこを削除するにはどうすればよいですか

分類Dev

ng-repeat 内に複数の ng-repeat を追加するにはどうすればよいですか?

Related 関連記事

  1. 1

    要素のクラスをng-repeatから変更するにはどうすればよいですか?

  2. 2

    これらのli要素を相互に設定するにはどうすればよいですか?

  3. 3

    ng-repeat内のオブジェクトから要素を削除するにはどうすればよいですか?

  4. 4

    javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

  5. 5

    Angular js ng-repeatでキーの重複値を削除するにはどうすればよいですか?

  6. 6

    csvから引用を削除するにはどうすればよいですか?

  7. 7

    JFrameからJPanelを削除するにはどうすればよいですか?

  8. 8

    通知から「+999」を削除するにはどうすればよいですか?

  9. 9

    #を削除するにはどうすればよいですか?URLから

  10. 10

    画像から背景を削除するにはどうすればよいですか?

  11. 11

    GoogleChromeからRamblerを削除するにはどうすればよいですか

  12. 12

    多数から改行を削除するにはどうすればよいですか?

  13. 13

    UIScrollViewからCAShapeLayerを削除するにはどうすればよいですか?

  14. 14

    APNSConfigurationからmachinekeysetを削除するにはどうすればよいですか?

  15. 15

    QWidgetからQPaletteを削除するにはどうすればよいですか

  16. 16

    行から括弧を削除するにはどうすればよいですか?

  17. 17

    URLShopifyから/ pagesを削除するにはどうすればよいですか?

  18. 18

    削除できないこれらのエラーを削除するにはどうすればよいですか?

  19. 19

    リストからいくつかの要素を削除するにはどうすればよいですか?

  20. 20

    これらの余分な矢印を出力から削除するにはどうすればよいですか?

  21. 21

    1つのXML要素からすべての属性を削除するにはどうすればよいですか?

  22. 22

    AngularJSを使用してng-repeat内の配列からオブジェクトを削除するにはどうすればよいですか?

  23. 23

    配列からすべてのリスト要素を削除するにはどうすればよいですか?

  24. 24

    配列からすべての非数値要素を削除するにはどうすればよいですか?

  25. 25

    Firestore配列から複数の要素を動的に削除するにはどうすればよいですか?

  26. 26

    ListViewから項目を削除し、Firebaseからも削除するにはどうすればよいですか?

  27. 27

    Microsoft WordのIEEE引用から角かっこを削除するにはどうすればよいですか?

  28. 28

    sqlalchemyからクエリ結果のかっこを削除するにはどうすればよいですか

  29. 29

    ng-repeat 内に複数の ng-repeat を追加するにはどうすればよいですか?

ホットタグ

アーカイブ