DOM keeps being rebuilding with angular-selectize ng-repeat and track by

Question

I'm using AngularJS with the angular-selectize module.

To populate the page with the elements I need I use something like this:

index.html

<selectize
    ng-repeat="select in selects_data track by $index"
    config="selectizeConfig"
    options="select.options"
    ng-model="selects_models[select.name]">
</selectize>

controller.js

$scope.update_data = function(){
    //I'm using AngularJS resource to get the JSON data from the server
    $scope.selects_data = StatesTableControl.get({'path': $scope.element.path},
        function(data){
            //Success
            angular.forEach(data, function(item){
                $scope.selects_models[item.name] = item.current_id
            });
        }, function(error){
            //Error
        }
    );
};

$scope.update_data();
$interval($scope.update_data, 3000);

No matter whether I use track by $index, track by select.name or don't use it at all, all of the <selectize></selectize> elements are redrawing completely every time I update the selects_data array with the data obtained from the server, even if the array content is the same after updating.

I haven't found any recipe to solve it by myself. And I can't understand why track by helps with the same thing when I use it inside div or other elements.

I'll be really glad if someone can help with the issue!

Answer 1

我认为这与跟踪项目的方式无关。如果StatesTableControl.get每次调用它都会返回新对象，我认为angular认为它们是不同的对象，即使它们包含相同的数据。

您只能发送已更改的对象，或维护对象的版本号，以便您知道未更改的对象，并且不会替换它们。