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

Question

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

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

通过按 Controller 部分中的按钮，可以将数据保存到参数$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 。只需单击获取数据按钮(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