angularjs - Angular : ng-options, 在更新时同时替换数组和模型值

Question

我正在研究一个模型，该模型针对每个属性更新，将自身发送到服务器并重新计算。由于大多数属性都基于列表，因此我广泛使用 <select>/"dropdown"。

关于如何设置逻辑的示例:

{
  NumberList: ['123', '456', '789']
  Number: 0
}

用户从 NumberList 中选择“ 123 ”，服务器响应

{
  NumberList: ['123', '456', '789']
  Number: 123,
  OtherNumberList: ['999', '888', '777'],
  OtherNumber: 0
}

我的问题是，一旦用户选择 123，它就不会“粘在” View 中。选择列表“闪烁”(缺乏更好的描述)并恢复为 0/Empty 选项。然而，在模型中正确反射(reflect)了该属性。

基于 SO 上的一个旧的类似问题，我尝试使用 ng-repeat。这几乎有效，但在某些属性 上奇怪地失败了 。

<select class="form-control" ng-model="model.Number" ng-change="mCtrl.updateModel(index)">
    <option ng-repeat="Number in model.NumberList" value="{{Number}}" ng-selected="model.Number == Number">{{Number}}</option>
</select>

但是，我当前的模板在所有属性 上都失败了 。认为解决一般问题更容易，我坚持使用它。

<select class="form-control" ng-options="val for val in NumberList" ng-model="model.Number"></select>

不管怎样，我试过使用 track by ，但没​​有运气。

我真的很难过问题是什么。我留下的唯一想法是，由于列表是字符串数组，而数字是数字，因此存在类型不等式。但是我假设 ngOptions 不做类型检查..？

更新 :根据要求，更新逻辑。
一旦模型更新，update 函数就会从服务器调用。对服务器的调用是通过服务从 ngChange 完成的。

'update': function (index, model) {
    $window.logger('Server called update ::');
    // The array below is a list of all models
    MyService.listOfModels[index] = model;
    // Yes, this is a bit quick'n'dirty ...
    $rootScope.$apply();
}

Answer 1

你的质疑是对的，但你的假设是错误的:

The only idea I have left is that since the list are arrays of strings, while the number being a number there is a type inequality. However I'm assuming ngOptions doesn't do type checking ..?

... 因为 ngOptions 指令 does使用 ===用于设置所选值。如果您希望在服务器响应后保持选择，这些类型需要匹配。

另一个注意事项

正如您在问题的评论和另一个答案中所指出的那样，您也可能会遇到由于将新对象重新分配给模型而引起的问题，而以一种或另一种方式，您可能应该扩展现有对象。

您也许可以使用 angular.extend没有对您的代码进行太多更改:

'update': function (index, model) {
...
     angular.extend(MyService.listOfModels[index], model );
...
}

Demo