Angular UI Select2, why is ng-model set as a JSON string?

Question

I am using angular -ui select2 for a fairly simple dropdown. It was supported by a static dataset sitting on my control area. In my controller, I have a function that is called when the ng changes the drop-down list so that I can perform some actions when the value changes.

However, I found that the ng-model property is set as a JSON string and not the actual javascript object, which makes it impossible to use dot notation to capture the properties of this model.

Here the function that processes the value of the drop-down list changes:

$scope.roleTypeChanged = function() { //fine: console.log('selectedType is: ', $scope.adminModel.selectedType); // this ends up being undefined because $scope.adminModel.selectedType is a // JSON string, rather than a js object: console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode); } 

Here's the plunker of my complete example: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

I have never seen a property that is tied to an ng model to do this before, but I'm also pretty new to Angular, so probably I'm just doing something wrong. I can, of course, do something like $ .parseJSON () to convert the JSON string back to an object, but I would prefer, if not necessary. Thanks for any help!

Answer 1

You need to use ng-options for your selection if you want to have object values. In fact, creating parameters yourself with ng-repeat will allow you to have string values ​​for various parameters:

 <select ui-select2 ng-model="adminModel.selectedType" ng-change="roleTypeChanged()" data-placeholder="Select Role Type" ng-options="type.displayName for type in adminModel.roleTypes"> <option value=""></option> </select> 

http://plnkr.co/edit/UydBai3Iy9GQg6KphhN5?p=preview

Answer 2

Thanks Carl! I fought a day with this

as a note for others having similar problems like me, when using an ng model that is not available and defined in the controller / directive, I solved it as follows.

//country.Model has code and name nodes

* HTML *

  <select name="country" data-ng-model="country.Model" data-ui-select2="" data-ng-change="countryChanged(country.Model)" <!--only for test, log to console--> data-ng-options="country as CodeAndName(country) for country in countries" data-placeholder="{{placeholderText(country.Model, '- - Select Country - -')}}" > <option value=""></option> </select> 

* Js *

  function controller($scope, $q, $location, $routeParams) { $scope.countryChanged = function(item) { // for test console.log('selectedType is: ', item); }; //returns the item or the text if no item is selected $scope.placeholderText = function (item, text){ if (item == undefined) return text; return $scope.CodeAndName(item); }; // returns a string for code and name of the item, used to set the placeholder text $scope.CodeAndName = function (item) { if (item == undefined) return ''; return item.Code + ' - ' + item.Name; };