CODEWITHSUNDEEP
javascriptangularjsng-optionsangularjs-track-by
Ingó Vals
Ingó Vals

Reputation: 4898

Updating array used by ng-options, refresh selected object

In angular the use of Track by to track selection by value instead of by reference is a nice feature if needed. But lets say I switch the array behind and the selected object id matches a new Id I want the select to change as well

How do I force it to reevaluate?

HTML:

    <select ng-options="option.id for option in collection track by option.id" ng-model="selectedObject"></select>
    <button ng-click="updateCollection()">Update</button>

JS:

    $scope.collection = [{
            id: 1,
            value: 0
        }, {
            id: 2,
            value: 0
        }, {
            id: 3,
            value: 0
        }];

    $scope.selectedObject = $scope.collection[0];

    $scope.updateCollection = function () {
        var newColl = [{
            id: 1,
            value: 100
        }, {
            id: 2,
            value: 200
        }, {
            id: 3,
            value: 300
        }];

        $scope.collection = newColl;

Lets say I pick Id 2 and then update the selectedObject is still the old id:2 value:0, I want it to change straight into id:2 value:200.

https://jsfiddle.net/IngoVals/p4ye3uaq/

P.S. Why doesn't the angular.copy work in the fiddle?

Upvotes: 2

Views: 2242

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

when you pick Id 2 then option model selectedObject is the second object of the collection which has Id of 2.

Then you press the update button and change $scope.collection at this point optoins will change in the select box, but the selected value is never changed, its still reference to the second object of the previous $scope.collection. so you need to update the selected value as well to do that,

get the selected object's index as,

 var selectedIndex = $scope.collection.indexOf($scope.selectedObject);

assign the new collection as you did,

$scope.collection = newColl;

finally update the selectedObject based on that previously selected object's index.

$scope.selectedObject = $scope.collection[selectedIndex];

here is the DEMO

Upvotes: 2

Related Questions