Javascript 观察对象数组中每个对象的特定属性-角度材质

我想听听对象数组中每个对象的特定属性，并根据不断变化的属性更改对象中的另一个属性值。我正在使用Angular material的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";
      }
    })
  });
});

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" 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>

<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>

{{mode.id}


{{item.text}

---

尝试以下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);

$scope.$watch（'items'，函数（newValues，oldValues）{
对于（var i=0；i

诀窍是使用$watch中的“true”来监视对象数组的属性更改（deepwatch）

---

这是您的JSFIDLE更新版。

最后，我解决了我的问题。我没有查看特定属性，而是选择了

ng更改

。它只是能够更改适当的属性

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";
      }
    })
  });
});

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" 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>

<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>

{{mode.id}


{{item.text}

---

没有angular.js experiance，但当下拉值更改为OK使用$watchCollection而不是$watch时，不会触发您的函数。另外，我认为您应该简化items对象，有些属性似乎是多余的。谢谢。：-）这正是我所期望的。但是，不是每次我更改值时都运行循环，而是有没有一种方法可以只更改相应对象的必需属性？而不是$watch的工作方式。你确实要求一种方法来。。。“侦听对象数组中每个对象的特定属性，并根据更改的属性更改对象中的另一个属性值。”这就是我所做的…：-）。但当然，“吻”。很容易被框架的力量所吸引，而忽略了直截了当的东西。别忘了将你的回答标记为“已接受”。