使用 ng-repeat 重新加载时未设置所选项目的内容

Question

我有一个代码，可以在按下按钮时使用ng-repeat 创建一对选择和输入元素。元素在单独的指令中定义：

<select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)"></select>

可以通过按下控制器部分的按钮将数据保存到参数$scope.mydata：

<button ng-click="save(myselects)">Save data</button>

js代码如下：

$scope.save = function(filter) {
    $scope.mydata = JSON.stringify(filter, null, 2);    
};

现在假设我们已经将来自$scope.mydata 的数据保存在一个文件中（参见Fiddle 中的mydata.txt）。当用户按下另一个按钮来取回数据时，应该会再次生成并显示元素：

<button ng-click="getData()">Get data</button>

用 JavaScript 编写代码来获取数据：

$scope.getData = function() {
    $http({
      method: 'GET',
      url: 'mydata.txt'
    }).success(function(data) {
      if (data != null && data != "") {
        $scope.myselects = data;        
      }
    });
};

我的问题是，当我单击该按钮时，未设置选择框中的元素。输入字段的内容已设置，但两个选择框的内容未设置。

谁能帮我解决这个问题？

完整的 Fiddle 是 here。只需单击 Get data 按钮（mydata.txt 中已有一些内容）。

提前谢谢！

Answer 1

默认情况下，ngModel 通过引用而不是值来监视模型。

当您从 mydata.txt 加载数据时，第一个选择的模型 (rule.parameter) 将是：

{"name":"Item1","relation":"default"}

选项数组将包含一个看起来相同的项目，但它仍然是另一个对象。

例如，这将记录false:

var object1 = {"name":"Item1","relation":"default"};
var object2 = {"name":"Item1","relation":"default"};

console.log(object1 === object2);

一种解决方案是使用track by 来通过属性值来标识对象。请注意，您选择的属性值必须是唯一。

例如：

<select ng-model="rule.parameter" 
        ng-options="sel1.name for sel1 in selects1 track by sel1.name" 
        ng-change="change(rule.parameter)"></select>

要使第二个选择正常工作，您不仅需要在更改第一个选择的选定值时构建过滤数组，还需要在初始化时构建过滤数组。

例如，在dynamicSelectPair的链接函数中添加如下：

if (scope.rule.parameter) scope.change(scope.rule.parameter);

演示： http://plnkr.co/edit/ANWhMcUh86MSeOi3WCV3?p=preview