javascript - 观察对象数组中每个对象的特定属性 - Angular Material

Question

我想监听对象数组中每个对象的特定属性，并根据变化的属性更改对象中的另一个属性值。我正在使用 Angular Material 的 md-select 来更改属性值。到目前为止，我已尝试如下。但它不起作用。我哪里出错了？请帮忙。

应用程序.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

试试这个 JavaScript/AngularJS Controller 调整:

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

诀窍是用 $watch 中的 'true' 观察对象数组的属性变化(深度观察)。

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