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

时间:2017-02-23 15:47:45

标签: javascript angularjs angular-material

我想要侦听对象数组的每个对象的特定属性,并根据更改的属性更改对象中的另一个属性值。我正在使用Angular材质&m; 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/

0 个答案:

没有答案