從ngRepeat生成的按鈕列表更改單按鈕顏色

我正在使用ngRepeat生成四個按鈕。每當我點擊其中一個按鈕時，我想改變它的顏色並執行一個函數（現在，我只是爲了簡單起見而使用了console.log）。如果我點擊另一個按鈕，我想改變它的顏色，同時將上一個按鈕恢復爲原來的顏色。從ngRepeat生成的按鈕列表更改單按鈕顏色

我有幾個問題 - 第一個是我似乎無法通過ng-click接受兩個命令（第一個是console.log函數，第二個是更改按鈕顏色的指令）。另一個問題是，如果我取出console.log函數，當我點擊一個按鈕時，最終會更改所有按鈕。

任何想法？這是plunkr：http://plnkr.co/edit/x1yLEGNOcBNfVw2BhbWA。你會看到console.log的作品，但按鈕更改不起作用。我是否用這個ng-click做錯了什麼？

<span class="btn cal-btn btn-default" ng-class="{'activeButton':selectedButt === 'me'}" ng-click="log(element);selectedButt = 'me'" data-ng-repeat="element in array">{{element}}</span>

來源

2014-11-05 nairys

哦，上帝...... ng-click在plunkr中工作並執行console.log和顏色變化。現在我需要弄清楚爲什麼它不起作用。但是，我仍然可以使用一些幫助來確定如何在單擊另一個按鈕時將更改的按鈕更改爲其原始顏色。 – nairys 2014-11-05 21:59:43

您可以創建在您的控制器的簡單功能，處理這樣的邏輯：

$scope.selectButton = function(index) { 
    $scope.activeBtn = index; 
}

然後，你可以簡單地檢查你的模板，如果當前按鈕被激活：

<span class="btn cal-btn btn-default" ng-class="{true:'activeButton'}[activeBtn == $index]" ng-click="selectButton($index);" ng-repeat="element in array">{{element}}</span>

我也改變了你的plunkr

來源

2014-11-05 22:21:22 ehlers

你可以將你的元素列表f rom字符串數組首先到對象數組。

$scope.array = [ 
    {"name":"first", "checked":false}, 
    {"name":"second", "checked":false}, 
    {"name":"third", "checked":false}, 
    {"name":"fourth", "checked":false} 
];

而且你的日誌功能需要改變：

$scope.log = function(element) { 
    console.log(element.name); 

    angular.forEach($scope.array, function(elem) { 
    elem.checked = false; 
    }); 

    element.checked = !element.checked; 
}

然後，在你的HTML：

<button class="btn cal-btn" 
    ng-repeat="element in array" 
    ng-click="log(element)" 
    ng-class="{activeButton: element.checked, 'btn-default': !element.checked}" 
    >{{element.name}}</button>

請查看更新的plunker here。

來源

2014-11-05 22:23:45

從ngRepeat生成的按鈕列表更改單按鈕顏色

回答

相關問題