使用 AngularJS ng-repeat 时如何在本地范围内初始化属性

Question

我有一个字符串列表和按钮，这些按钮可以改变局部范围内每个字符串的颜色属性。每个新添加的字符串都将是黑色的，因为从 Controller 范围获取颜色属性。如何在新字符串的局部范围内初始化颜色属性？

这只是一个演示我的问题的例子。因此，在实际项目中，我无法将新的属性添加到列表（如 currentColor: 'Red'）或其他内容。我只想知道：如何在创建此范围时在本地范围内将值设置为属性。

var MyApp = angular.module('MyApp', []);

        MyApp.controller('MyController', function ($scope) {
            $scope.color = 'Black';
            $scope.list = [
                { text: 'text1' },
                { text: 'text2' },
                { text: 'text3' }
            ]

            $scope.AddNewText = function () {
                $scope.list.push({ text: 'text' + ($scope.list.length + 1) });
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div ng-app="MyApp">
        <div ng-controller="MyController">
            <div ng-repeat="item in list">
                <span style="color:{{color}}">{{item.text}}</span>
                <button data-ng-click="color = 'Red'">Red</button>
                <button data-ng-click="color = 'Green'">Green</button>
                <button data-ng-click="color = 'Blue'">Blue</button>
                <button data-ng-click="color = 'Black'">Black</button>
            </div>
            <button data-ng-click="AddNewText()">Add new text</button>
        </div>
    </div>

Answer 1

使 $scope.list 成为包含文本和颜色的对象数组。

 $scope.list = [
                { text: 'text1',color: 'black' },
                { text: 'text2',color: 'black' },
                { text: 'text3',color: 'black' }
            ]

Html:

        <span style="color:{{item.color}}">{{item.text}}</span>
            <button data-ng-click="item.color = 'Red'">Red</button>

如果你想在没有列表的情况下进行初始化，你想使用$watch。

$scope.$watch('list', function() {
       $scope.color = 'black';
       console.log('list has changed, do whatever you want');
   });

Answer 2

ng-repeat 创建自己的代码。要初始化本地范围，您可以使用 ng-init.

<div ng-repeat="item in list" ng-init="color = 'red'">
     <span style="color:{{color}}">{{item.text}}</span>
</div>

Answer 3

只更改一个 html 行，使用 ng-style 指令处理颜色的默认值。

<span ng-style="{'color':color||'Black'}">{{item.text}}</span>

你html会像下面这样

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <div ng-repeat="item in list"> 
            <span ng-style="{'color':color||'Black'}">{{item.text}}</span>
            <button data-ng-click="color = 'Red'">Red</button>
            <button data-ng-click="color = 'Green'">Green</button>
            <button data-ng-click="color = 'Blue'">Blue</button>
            <button data-ng-click="color = 'Black'">Black</button>
        </div>
        <button data-ng-click="AddNewText()">Add new text</button>
    </div>
</div>

无需从控制器设置任何颜色值。 Fiddle here

希望我理解你的问题。谢谢

使用 AngularJS ng-repeat 时如何在本地范围内初始化属性

How to initialize property in local scope when using AngularJS ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-repeat

angularjs-ng-style

使用 AngularJS ng-repeat 时如何在本地范围内初始化 属性

How to initialize property in local scope when using AngularJS ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-repeat

angularjs-ng-style

使用 AngularJS ng-repeat 时如何在本地范围内初始化属性