CODEWITHSUNDEEP
angularjsselectviewmodel
mgerbracht
mgerbracht

Reputation: 81

Angular Select not updating if model changes

I am working on a website which uses Angular (1.6.4) Select. The content for the select element is loaded via REST if it is requested the first time. But the response of the REST call is cached so that following calls load the data from memory. If I load the website the select element is empty and I can't select any value. If I visit the site again with the data cached, the selectbox allows you to select items from a list. If I redirect the REST call to a file containing the data it works on the first attempt and I can select items as expected

So it seems that the code works in principle but if the model is updated too late the select element does not notice the changes.

Here is the code I am using:

<select ng-model="myData" chosen
        class="select--chosen"
        ng-change="handleSelection()"
        ng-options="myData as myData.value for myData in dataArray">
</select>

The controller code looks like this (called when site is opened):

$scope.dataArray = [];
//$scope.dataArray = [{value : "just a test value"}];
$scope.$watch('dataArray ', function() {console.log("dataArray was changed...")}, true);

getArray();

function getArray() {
  DataFactory.getArray().then(function (data) {
    $scope.dataArray  = data;
  });
}

I do get the watch message when I load the site for the first time. When looking for a solution I found several hints but none of them worked for me. This is what I tried:

1) Add 

$scope.$apply(function(){ /* code */ });

to set the dataArray inside this function or call it inside of the watch-function. In both cases I got the error on the console that the digest is already updating or so, indicating that it is not neccessary to use scope.$apply

2) Use 

$scope.onChange($scope.dataArray);

after setting dataArray = data.

Unfortunately nothing worked. If I uncomment the line:

$scope.dataArray = [{value : "just a test value"}];

I can choose this entry after loading the page and the select view then shows the first entry of the dataArray and afterwards I can access the whole list and select items from it.

So I would like to know what I can do to update the select view after the data is available. Either by adding a Listener or by manually calling the select view to update(), refesh() or so. Is there such a function available?

Upvotes: 0

Views: 1316

Answers (1)

anoop
anoop

Reputation: 3822

You can show your select element by some boolean flag, which sets true, when data loaded.

You can do something like below code.

In controller :

$scope.dataArray = [];
$scope.myData= null;
$scope.isDataLoaded = false; //flag for data loading.

function getArray() {
  DataFactory.getArray().then(function (data) {
    $scope.isDataLoaded = true; // make true now
    $scope.dataArray = data.data; //your result might be data.data
    $scope.myData = $scope.dataArray[0]; // you may select 1st as default
  });
}    
getArray();

In html:

<select ng-if="isDataLoaded" ng-model="myData" ng-class="select-chosen"
        ng-options="myData as myData.value for myData in dataArray">
</select>

Upvotes: 1

Related Questions