AngularJS: 当属性源对象改变时刷新 ng-options

Question

完整描述：我有多个属性的选项列表（不仅仅是键值对）：

[
  {
    id: 1,
    name: "111",
    some: "qqq"
  },
  {
    id: 2,
    name: "222",
    some: "www"
  }
];

而select定义为：

<select name="mySelect" id="mySelect"
  ng-options="option.name for option in opts track by option.id"
  ng-model="mod1"></select>

根据应用逻辑，额外的属性可能会发生变化：

{
  id: 2,
  name: "222",
  some: "www1"
}

但 Select 中的实际列表没有改变！但是，如果名称更改，则将刷新整个选项列表。

简而言之，您可以在 JSFiddle OR JSFiddle 上看到演示。我准备了两个非常相似的例子：

单击按钮时仅额外属性更新
单击按钮时 - 额外属性和键都会收到新值

有人知道解决办法吗？

更新

现在我正在用 update + delay + update 解决方案解决这个问题：

this.click = function(){
  $scope.opts = {};
  $timeout(function() {
    $scope.opts = { /* NEW OBJECT */};
  }, 0);
}

Answer 1

好的，所以我认为我明白你想要什么，那就是能够 select 一个选项，其嵌套值可能在列表呈现后发生了变化在 DOM.

基于这种理解，我相信我创建的 plunker 为您提供了解决方案。如果您 select 选项之一，并更改输入字段中的子值，双向绑定将更新模型。

基本上，它采用用户 selection，并根据 select 更改，重新分配 selected 对象以引用选项数组中的原始选项。这将允许双向绑定发生。如果您查看代码，您会看到输入字段正在更新选项列表本身 ($scope.options)，其中显示的模型是 $scope.formData.model.

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

HTML

<select 
  name="mySelect"
  id="mySelect"
  ng-model="formData.model"
  ng-change="onChange(formData.model)"
  ng-options="option.name for option in options track by option.id"></select>

  SELECTED CHILD: {{formData.model.child.name}}

<hr>

<div ng-repeat="option in options">
  Child Name for {{ option.name }}: <input ng-model="option.child.name">
</div>

JS

  $scope.onChange = function(option) {

    angular.forEach($scope.options,function(optionItem){
      if (optionItem.id == option.id){
         $scope.formData.model = optionItem;
      }
    })


  }

  $scope.options = [
    {
      id: 1,
      name: "111",
      child: {
        id: 11,
        name: "111-1"
      }
    },
    {
      id: 2,
      name: "222",
      child: {
        id: 22,
        name: "222-1"
      }
    }
  ];

  $scope.formData = {
    model: $scope.options[0]
  };

Answer 2

每当您想应用所做的更改时调用 $apply。

$scope.$apply();

这将告诉 AngularJS 刷新。

AngularJS: 当属性源对象改变时刷新 ng-options

AngularJS: refresh ng-options when property source object changes

angularjs

ng-options

angularjs-ng-options

更新

AngularJS: 当 属性 源对象改变时刷新 ng-options

AngularJS: refresh ng-options when property source object changes

angularjs

ng-options

angularjs-ng-options

更新

AngularJS: 当属性源对象改变时刷新 ng-options