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

Question

I have a code that is able to create a pair of selects and input elements with ng-repeat upon pressing a button. The elements are defined in a seperate directive:

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

The data can be saved to a parameter $scope.mydata by pressing a button in the controller section:

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

The js code is as follows:

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

Now suppose we have save our data from $scope.mydata in a file (see mydata.txt in Fiddle ). When the user presses another button to get the data back, the elements are supposed to be generated and displayed again:

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

Code in JavaScript to get the data back:

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

My problem is, that the elements in the select boxes are not set when I click that button. The content of the input field is set but that of the two select boxes is not.

Can anyone help me on this?

The complete Fiddle is here . Just click on the Get data button (there is some content in mydata.txt already).

Thanx in advance!

Answer 1

By default, ngModel watches the model by reference, not value.

When you load the data from mydata.txt the model ( rule.parameter ) for the first select will be:

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

The array of options will contain an item that looks the same, but it will still be another object.

For example, this will log false :

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

console.log(object1 === object2);

One solution is to use track by to instead identify the objects by a value of a property. Note that the value of the property you choose must be unique .

For example:

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

To get the second select to work properly you need to build the filtered array not only when you change the selected value of the first select, but also upon initialization.

For example, add the following to the link function of dynamicSelectPair:

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

Demo: http://plnkr.co/edit/ANWhMcUh86MSeOi3WCV3?p=preview