將字符串傳遞給ng-repeat的角方法

我想添加一些預定義的顏色供用戶選擇。我使用顏色創建了一個$ scope數組，並通過數組元素創建了按鈕。每個按鈕都有一個ng-click屬性，我想在控制器上調用應該處理傳遞的顏色屬性的方法。將字符串傳遞給ng-repeat的角方法

我的HTML：

<button ng-repeat="color in colors" style="background-color:{{color}};" ng-click="ChangeBgColor(color)"></button>

而且，所述控制器：

$scope.colors = ['#ddd', '#b2b2b2', '#0c60ee', '#0a9dc7', '#28a54c', '#e6b500', '#e42112', '#6b46e5', '#111', 'orange', 'yellow', 'maroon', 'green', 'brown', 'lightblue']; 
$scope.ChangeBgColor = function(selectedColor) 
    { 
    console.log(selectedColor); 
    $scope.selectedProduct.bgcolor = selectedColor; 
    }

控制器中的console.log總是有所述陣列的所述第一元件，#ddd。我甚至嘗試過ChangeBgColor（'{{color}}'），但那也沒有幫助。（同樣的結果，當檢查DOM時，我可以看到不同的顏色作爲字符串參數。）

更好的方法是將selectedProduct.bgcolor屬性綁定到ng-repeat並讓angular做選擇並在用戶選擇其他顏色，但我是新角色，這似乎太多了一天。

來源

2016-05-13 Perrier

https://jsfiddle.net/stevenkaspar/bu9r82ct/這不是你想要的。我沒有看到問題 –

@StevenKaspar我有相同的代碼，我的工作不正常。 jsfiddle中的一個可以工作，它將選定的顏色傳遞給方法。 – Perrier

當我點擊另一個按鈕時，第一個按鈕看起來像推動...就像他們是單選按鈕或其他東西。 – Perrier

問題是，我把所有的按鈕，一個標籤：

<label class="item item-input"> 
    <span class="input-label">Háttérszín</span> 
    <button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)"></button> 
</label>

如果我改變標籤到DIV這是工作如預期。我不明白，順便說一句，我用離子只是忘了提及。謝謝你的幫助！

來源

2016-05-13 15:18:06 Perrier

使用ng-style指令爲此。

<button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)"></button>

var app = angular.module("app",[]); 
 

 
app.controller("MyCtrl" , function($scope){ 
 
    $scope.colors = ['#ddd', '#b2b2b2', '#0c60ee', '#0a9dc7', '#28a54c', '#e6b500', '#e42112', '#6b46e5', '#111', 'orange', 'yellow', 'maroon', 'green', 'brown', 'lightblue']; 
 
    $scope.selectedProduct = {bgcolor:""}; 
 
$scope.ChangeBgColor = function(selectedColor) 
 
    { 
 
    console.log(selectedColor); 
 
    $scope.selectedProduct.bgcolor = selectedColor; 
 
    }; 
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MyCtrl"> 
 
    
 
    <div ng-style="{'background-color':selectedProduct.bgcolor}"> 
 
    This is a test! 
 
    </div> 
 
    <button ng-repeat="color in colors" ng-style="{'background-color':color}" ng-click="ChangeBgColor(color)">{{color}}</button> 
 
    
 
</div>

來源

2016-05-13 14:27:36

感謝ng風格，但每次無論點擊哪個按鈕，方法仍然會獲得#ddd。 – Perrier

看到我更新的答案。 –

我相信你的代碼是完美的，因爲它就像史蒂文在jsfiddle中一樣。但我仍然一直給#ddd。有趣的是，當我推動除#ddd之外的任何按鈕時，第一個按鈕仍然有效。就像他們是單選按鈕，如果我推第三個，第一個似乎也在改變。 WTF？ – Perrier

將字符串傳遞給ng-repeat的角方法

回答

相關問題