javascript - 有没有办法使用 ng-options 更新两个值而不使用 ng-change ？

Question

我有一个下拉列表，我想在选择其中一个选项时更新对象。如果我只需要更新对象上的单个属性，那么这很好，但在这种情况下，我想使用对象下拉列表中的两个属性来更新两个属性。

我可以直接将选项分配给对象，但随后我会丢失我想要保留的属性名称。

我想出了一种方法，使用 ng-change 和下划线来查找关联的值，但是如果我的页面上有很多下拉列表(我计划这样做)，那么对每个下拉列表执行此操作会很乏味做)。

有没有办法仅使用 ng-options 来完成相同的功能？如果没有，是否有更好的方法，这样我就不必为每个下拉菜单重复更新功能？

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.list = [
      {value: '1', text: 'joe'},
      {value: '2', text: 'bill'},
      {value: '3', text: 'ted'},
    ];

  //I want to keep the property names, notice how value matches with number     
  //and text matches with name 
  $scope.item = { 
    name: 'joe',
    number: '1'
  }

  //Is there a way to get this same functionality using ng-options?
  $scope.update = function(item) {
    item.name = _.findWhere($scope.list, {value: item.number}).text;
  }

});

HTML

<select ng-model="item.number"
        ng-options="option.value as option.text for option in list" ng-change="update(item)">
</select>

https://plnkr.co/edit/di7RB2oVKJR57CK1sOPh?p=preview

Answer 1

是的，有。您可以直接将 $scope.item 对象用于 ng-model，并使用预期的对象格式({name: option.text, number: option. value})作为 ng-options 中的值，通过唯一的属性进行跟踪，然后让 Angular 完成剩下的工作。

通过 option.value 跟踪 || option.number 是匹配初始渲染选择所必需的，其中 $scope.item 最初没有 item.value 可供比较，因此track by将回退到item.number进行比较。

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.list = [
      {value: '1', text: 'joe'},
      {value: '2', text: 'bill'},
      {value: '3', text: 'ted'},
  ];

  $scope.item = { 
    name: 'joe',
    number: '1'
  }

});

HTML

<select ng-model="item"
        ng-options="{name: option.text, number: option.value} as option.text
                    for option in list
                    track by option.value || option.number"></select>

{{item.name}}-{{item.number}}

骗子:http://plnkr.co/edit/oKfWRANkkPiS6UHKrjRX