将字符串传递给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的角方法

回答

相关问题