文字列をng-repeatの角度メソッドに渡す

Question

ユーザが選択できるようにいくつかの定義済みの色を追加したいと思います。私は色の$スコープ配列を作成し、配列の要素によってボタンを作成しました。各ボタンには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を調べると、同じ結果が文字列パラメータとして表示されます）

より良い方法は、selected-product.bgcolorプロパティをng-repeatにバインドして、angleが選択を行い、ユーザーは他の色を選択していますが、私は角度がついていないので、これは一日過ぎているようです。

Answer 1

の問題は、私は1枚のラベルにすべてのボタンを置くことだった：私はラベルへのdivを変更した場合

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

それが働いています予想通り。私は理解していない、私はイオンを使用するだけで言及するのを忘れてしまった。ご協力いただきありがとうございます！

Answer 2

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>