从 ng-repeat 将字符串传递给角度方法答案

【问题标题】：Pass string to angular method from ng-repeat从 ng-repeat 将字符串传递给角度方法
【发布时间】：2016-05-13 14:22:35
【问题描述】：

我想添加一些预定义的颜色供用户选择。我用颜色制作了一个 $scope 数组，并通过数组的元素创建了按钮。每个按钮都有一个 ng-click 属性，我想在控制器上调用一个方法来处理传递的颜色属性。

我的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 进行选择并在用户选择其他颜色时进行更改，但我是 angular 新手，这对于一天来说似乎太多了.

【问题讨论】：

jsfiddle.net/stevenkaspar/bu9r82ct 这不是您想要的。我没有看到问题
@StevenKaspar 我有相同的代码，但我的不工作。您的 jsfiddle 中的那个有效，它将选定的颜色传递给方法。
当我点击另一个按钮时，第一个按钮看起来像是在推动......就像它们是单选按钮或其他东西。
渲染的按钮是否至少根据数组设置了背景颜色？
@TSmith 是的，他们从数组中获得了 bgcolor。问题是所有按钮都放在一个标签内。我已将标签更改为 div 并且按钮开始工作。然而我不知道为什么。我给出最佳解释的解决方案。

标签： javascript html angularjs

【解决方案1】：

为此使用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>

【讨论】：

感谢 ng-style 但无论我点击哪个按钮，该方法每次都会得到 #ddd。
我确信您的代码是完美的，就像 Steven 在 jsfiddle 中的代码一样。但我的仍然一直给#ddd。有趣的是，当我按下除#ddd 之外的任何按钮时，第一个按钮仍然执行某些操作。如果我按下第三个按钮，它们就像单选按钮一样，第一个按钮似乎也在改变。什么鬼？

【解决方案2】：

问题是我将所有按钮都放在一个标签中：

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

如果我将 label 更改为 div，它会按预期工作。我不明白，顺便说一句，我使用离子只是忘了提及。感谢您的帮助！

【讨论】：