更新

Question

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

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

并选择定义为：

<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中的实际列表并没有改变！但是，如果名称更改，则将刷新整个optionList。

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

单击按钮时，只有额外的属性更新
单击按钮时 - 额外属性和键都会获得新值

有人知道解决方案吗？

更新

目前我正在使用update + delay + update解决方案解决该问题：

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

Answer 1

好的，所以我想我明白你想要什么，这是能够选择一个选项，自从列表在DOM中呈现以来，嵌套值可能已经改变了。

基于这种理解，我相信我创造的那个傻瓜为您解释了一个解决方案。如果选择其中一个选项，并在输入字段中更改子值，则双向绑定将更新模型。

基本上，它是选择用户，在选择更改时，重新分配所选对象以引用options数组中的原始选项。这将允许双向绑定发生。如果您查看代码，您将看到输入字段正在更新选项列表本身（ $ 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

更新

2 个答案: