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

Question

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

这只是一个例子来说明我的问题。因此，在实际项目中，我无法将新属性添加到 List（例如 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

仅使用ng-style 指令更改将处理颜色默认值的 html 行。

<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

希望我能理解您的问题。谢谢。

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

使 $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');
   });