0

ローカル スコープ内の各文字列の色のプロパティを変更する文字列とボタンのリストがあります。Controllerスコープからcolorプロパティを取得するため、新しく追加されたすべての文字列は黒になります。新しい文字列のローカルスコープでカラープロパティを初期化するにはどうすればよいですか?

これは、私の問題を示すための単なる例です。そのため、実際のプロジェクトでは、新しいプロパティをリスト (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>

4

3 に答える 3

1

ng-repeat独自のコードを作成します。ローカル スコープを初期化するには、ng-init.

<div ng-repeat="item in list" ng-init="color = 'red'">
     <span style="color:{{color}}">{{item.text}}</span>
</div>
于 2015-01-18T12:43:59.877 に答える
0

$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');
   });
于 2015-01-18T11:51:47.223 に答える