觀察對象數組中每個對象的特定屬性 - 角度素材

Question

我想要偵聽對象數組中每個對象的特定屬性，並根據更改的屬性更改對象中的另一個屬性值。我正在使用Angular材質的md-select來更改屬性值。到目前爲止，我嘗試瞭如下。但它不起作用。我哪裏錯了？請幫忙。

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控制器的調整：

$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); 

訣竅是凝視着g $ watch中'true'屬性更改（深層監視）的對象數組。

這是您的JSFiddle更新，https://jsfiddle.net/rekrah/vndf0hcu/。