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;        
      }
    });
};

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

有人可以帮我吗？

完整的小提琴是here。只需点击获取数据按钮（ mydata.txt 中已有一些内容）。

提前Thanx！

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

使用ng-repeat

1 个答案: