Question

我想添加一些预定义的颜色供用户选择。我创建了一个带有颜色的$ 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进行选择并在用户选择其他颜色时进行更改，但我是角色的新手，这对于一天来说似乎太多了

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

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

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

将字符串传递给ng-repeat的角度方法

2 个答案: