Wijimo Autocomplete & AngularJS - setting initial value from loaded data

Question

I am trying to set the initial value in a Wijimo Autocomplete control which has been loaded from an external data source. The scenario being a form is used to create some new data and then is saved. Subsequently the data needs to be edited so it is reloaded into the form.

I can successfully use the Autocomplete on the initial form - the source list is a JSON Array of objects which is loaded into the controller. The app is using UI Router so I resolve this first.

When I save the data I serialise the selected Object from the Autocomplete control and is then saved to a Mongo DB store. When loading this data back in it is converted back to an object.

This is what the control looks like:

 <wj-auto-complete
                            selected-index="selectedIndexCombo"
                            selected-item="selectedAirline"
                                      items-source="airlineCodes"
                                      display-member-path="Title"
                                      placeholder="Airline Code"
                                      max-items="50"/>

An example of the source list looks like this:

{
    "@href":"\/airline.nsf\/api\/data\/collections\/name\/(LUAirlines)\/unid\/8DCD734E7BCDA24D80257C99003770C4",
    "@link":
    {
      "rel":"document",
      "href":"\/airline.nsf\/api\/data\/documents\/unid\/8DCD734E7BCDA24D80257C99003770C4"
    },
    "@entryid":"98-8DCD734E7BCDA24D80257C99003770C4",
    "@unid":"8DCD734E7BCDA24D80257C99003770C4",
    "@noteid":"FB2",
    "@position":"98",
    "@siblings":100,
    "@form":"Airline",
    "AirlineCode":"WN",
    "Airline":"Southwest Airlines",
    "Title":"WN - Southwest Airlines"
  }

So when the form is initially created the controller property selectedAirline is correctly set with the selected Object.

So this works fine in the save function:

  $scope.formData.selectedAirline = JSON.stringify($scope.selectedAirline);

But when reloading in the data:

AirlineInfoFactory.loadAirlineInfo($scope.reference).then(function success(response) {
                $scope.selectedAirline = eval('(' + response.data.selectedAirline + ')');
                $scope.information = response.data.information;
                $scope.dataLoaded = true;
                console.log($scope.selectedAirline)
                $scope.selectedIndexCombo=11;
            })

The autocomplete control does not bind to the selectedAirline property.

I tried using the selected-index attribute on the directive so see if I could just change it to something when the data loads but it doesnt work either. I suspect its to do with the digest loop but I am not sure.

Any ideas?

Thanks

Answer 1

I tried to replicate the scenario by reloading the data and setting the selectedAirline property and it works well withe latest version 32. Here is the fiddle: http://jsfiddle.net/n1kpkcud/2/

 ` $scope.countries = initialList;
   $scope.selectedAirline = '';
   $scope.setItem = function () {
       $scope.countries = reloading;
       $scope.selectedAirline = 'Yemen';
   }`

I would suggest you to update this fiddle so that it replicates the issue and I can suggest you accordingly.