オブジェクト配列内の各オブジェクトの特定の属性を見る - 角形

Question

オブジェクト配列の各オブジェクトの特定の属性をリッスンし、変更属性に従ってオブジェクト内の別の属性値を変更します。私はAngular materialのmd-selectを使って属性値を変更しています。これまで私は以下のように試みました。しかし、それは動作していません。どこが間違っていたのですか？助けてください。トリックを見つめている

$scope.$watch('items', function(newValues, oldValues) { 
    for (var i = 0; i < newValues.length; i++) { 
     if (newValues[i].textMode.id === 1) { 
     newValues[i].text = "word"; 
     } else if (newValues[i].textMode.id === 2) { 
     newValues[i].text = "phrase"; 
     } else if (newValues[i].textMode.id === 3) { 
     newValues[i].text = "paragraph"; 
     } 
    } 
    }, true); 

：

app.js

var app = angular.module('app', ['ngAria', 'ngAnimate','ngMaterial']); 

app.controller('appController', function ($scope) { 
    $scope.modes = [{id: 1}, {id: 2}, {id: 3}]; 

    $scope.items = [ 
    {id: "1", text: "word", textMode: {id: 1}}, 
    {id: "2", text: "word", textMode: {id: 1}}, 
    {id: "3", text: "word", textMode: {id: 1}} 
    ]; 

    angular.forEach($scope.items, function(item) { 
    $scope.$watch('item.textMode.id', function() { 
     if (item.textMode.id === 1) { 
     item.text = "word"; 
     } else if (item.textMode.id === 2) { 
     item.text = "phrase"; 
     } else if (item.textMode.id === 3) { 
     item.text = "paragraph"; 
     } 
    }) 
    }); 
}); 

index.htmlを

<div ng-app="app"> 
    <div ng-controller="appController"> 
    <div ng-repeat="item in items"> 
     <md-select aria-label="textChanger" class="selector" ng-model="item.textMode.id" placeholder="Text mode ID"> 
     <md-option ng-repeat="mode in modes" ng-value="mode.id"> 
      {{mode.id}} 
     </md-option> 
     </md-select> 

     <br> 
     {{item.text}} 

     <br><br><br> 
    </div> 
    </div> 
</div> 

JsFiddle: https://jsfiddle.net/lpsandaruwan/ho5egr16/

Answer 1

最後に、私は私の問題を解決しました。特定の属性を見るのではなく、ng-changeを選択しました。それは、単に適切な属性を変更する能力を持っています。

app.js

var app = angular.module('app', ['ngAria', 'ngAnimate','ngMaterial']); 

app.controller('appController', function ($scope) { 
    $scope.modes = [{id: 1}, {id: 2}, {id: 3}]; 

    $scope.items = [ 
    {id: "1", text: "word", textMode: {id: 1}}, 
    {id: "2", text: "word", textMode: {id: 1}}, 
    {id: "3", text: "word", textMode: {id: 1}} 
    ]; 

    $scope.onChange = function(item) { 
    if (item.textMode.id === 1) { 
     item.text = "word"; 
     } else if (item.textMode.id === 2) { 
     item.text = "phrase"; 
     } else if (item.textMode.id === 3) { 
     item.text = "paragraph"; 
     } 
    }; 
}); 

index.htmlを

<div ng-app="app"> 
    <div ng-controller="appController"> 
    <div ng-repeat="item in items"> 
     <md-select aria-label="textChanger" class="selector" ng-model="item.textMode.id" ng-change="onChange(item)" placeholder="Text mode ID"> 
     <md-option ng-repeat="mode in modes" ng-value="mode.id"> 
      {{mode.id}} 
     </md-option> 
     </md-select> 

     <br> 
     {{item.text}} 

     <br><br><br> 
    </div> 
    </div> 
</div> 

JSFiddle - https://jsfiddle.net/lpsandaruwan/ho5egr16/6/

Answer 2

はこのJavaScript/AngularJSコントローラの微調整を試してみてくださいg $ watchで 'true'を指定してプロパティの変更（ディープウォッチ）を行うオブジェクトの配列。

JSFiddleが更新されました。https://jsfiddle.net/rekrah/vndf0hcu/です。