AngularJS ng-repeat 和 ng-style 正在所有框中应用样式

Question

我正在尝试制作 4 个按钮，其值分别为“红色”、“绿色”、“蓝色”和“黄色”，当我单击它们时会显示一个具有相应背景颜色的框。问题是背景颜色适用于所有框，而不仅仅是它们各自的框。 我在视图中尝试了这个：

<div class="cont">
<div class="botones">
    <button ng-click="agregarColor(0)" class="btninter" style="color: red">Rojo</button>
    <button ng-click="agregarColor(1)" class="btninter" style="color:green">Verde</button>
    <button ng-click="agregarColor(2)" class="btninter" style="color:blue">Azul</button>
    <button ng-click="agregarColor(3)" class="btninter" style="color:yellow">Amarillo</button>
</div>
<div class="cajamuestra">
    <div ng-style="change" class="cajacolor" ng-repeat="clr in repeats track by $index">
        {{clr}}
    </div>
</div>

控制器中的这个：

.controller("MiControlador", function($scope){
$scope.colores = ["Rojo", "Verde", "Azul", "Amarillo"];
$scope.repeats = [];
$scope.agregarColor = function(i){
    $scope.repeats.push($scope.colores[i]);
    if (i==0){
        $scope.change = {
            "background-color" : "rgba(255,0,0,0.5)"
        }
    } else if (i==1) {
        $scope.change = {
            "background-color" : "rgba(0,255,0,0.5)"
        }
    } else if (i==2) {
        $scope.change = {
            "background-color" : "rgba(0,0,255,0.5)"
        }
    } else if (i==3) {
        $scope.change = {
            "background-color" : "rgba(255,255,0,0.5)"
        }
    }
}

Answer 1

那是因为 $scope 中只定义了 1 个 change 值。每次重复都需要一个 change 变量。

$scope.agregarColor = function(i){
    var clr = {
       color: $scope.colores[i]
    };
    
    if (i==0){
        clr.change = {
            "background-color" : "rgba(255,0,0,0.5)"
        }
    } else if (i==1) {
        clr.change = {
            "background-color" : "rgba(0,255,0,0.5)"
        }
    } else if (i==2) {
        clr.change = {
            "background-color" : "rgba(0,0,255,0.5)"
        }
    } else if (i==3) {
        clr.change = {
            "background-color" : "rgba(255,255,0,0.5)"
        }
    }

    $scope.repeats.push(clr);
}

然后你再重复一遍：

<div ng-style="clr.change" class="cajacolor" ng-repeat="clr in repeats track by $index">
    {{clr.color}}
</div>

AngularJS ng-repeat 和 ng-style 正在所有框中应用样式

AngularJS ng-repeat and ng-style is applying the style in all the boxes

javascript

angularjs