角納克級的NG-點擊裏面NG-重複

編輯：下面這些問題的答案都沒有考慮到，也被應用的+1功能。仍然在尋找如何讓這兩件事情發生。角納克級的NG-點擊裏面NG-重複

我有一個被稱爲上NG-重複內的按鈕的NG-點擊功能，但每一個按鈕被點擊它時會導致類來改變所有的按鈕。

如何解決我的代碼，使其因此只有點擊的按鈕本身的變化？

（請記住，這些數字做工精細，它只是改變一起的類。）

的角度控制器代碼：

$scope.activeClass = false; 

$scope.addHeart = function(post){ 

    $scope.activeClass = !$scope.activeClass; 

    $scope.activeClass ? post.hearts += 1 : post.hearts -= 1; 

};

和HTML：

<button ng-class="{'red' : activeClass}" ng-click="addHeart(post)">{{post.hearts | number}}</button>

來源

2017-01-16 Elias Ghosn

對於所有按鈕，全局都可以訪問'activeClass'。嘗試根據索引使其獨立。 –

答案中提供了兩個選項，儘管可能還有更多選項。如果沒有人適合，請編輯您的帖子以解釋您是否有特定需求！ – YannickHelmut

如果您希望單次選擇，請嘗試https://jsfiddle.net/U3pVM/29445/。 –

您需要創建一個數組併爲每個ng-repeat行更新數組內的標誌。

<div ng-repeat="node in nodes track by $index"> 
    <button ng-class="{'red' : activeClass[$index]}" ng-click="addHeart(post, $index)">{{post.hearts | number}}</button> 
</div>

的js

$scope.activeClasses = []; 

$scope.addHeart = function(post, index){ 

    $scope.activeClasses[index] = !$scope.activeClasses[index]; 

    $scope.activeClasses[index] ? post.hearts += 1 : post.hearts -= 1; 

};

來源

2017-01-16 09:28:50

控制器中伴隨的JS看起來會是什麼樣子？ –

我已更新答案。 –

你的所有按鈕都綁定到的範圍變量。所以他們全部改變的事實是一種正常的行爲。

如果你只是想爲你應該做到以下幾點點擊的元素做到：

<button ng-click="addHeart($event)"></button>

現在我們正在發送與點擊的事件，這將使我們能夠知道這按鈕被點擊。

在你的範圍，以下內容添加到您的addHeart功能：

$scope.addHeart = function($event) { 
    angular.element($event.currentTarget).addClass('red'); 
}

這使您可以訪問當前元素在DOM和操縱它;）

編輯

無論是你的問題不夠清楚，或者我的解釋是錯誤的。無論哪種方式，我想我明白你的需要，我們應該以不同的方式做到這一點。

如果我理解您的評論的正確途徑，你有你的JSON飼料（或其他來源的職位都來自）心中的數量。

在這種情況下，你可以使用ng-class與表達：

<button ng-click="addHeart($event)" ng-class="post.hearts > 0?'red':'empty';"></button>

我只加了演示邏輯測試。 post.hearts > 0?'red':'empty'你其實並不需要> 0部分，因爲0表示false。

我們正在測試如果該職位有超過0的心，在這種情況下，它應該是紅色。如果你的雙向綁定按預期工作，這應該也能工作！

來源

2017-01-16 09:29:20 YannickHelmut

好的一芽，歡呼 –

好的，但如果我這樣做，那麼它打破了數字添加功能。我怎樣才能切換類，並在同一時間只在一個目標上添加數字？ –

您也可以將兩個參數傳遞給函數：addHeart（$ event，post）{}並在其中執行兩個參數。這完全取決於你！ – YannickHelmut

角納克級的NG-點擊裏面NG-重複

回答

相關問題