UI angolare Select2, perché il modello ng viene impostato come stringa JSON?

Question

Sto usando angular-ui's select2 per un menu a discesa abbastanza semplice. È supportato da una matrice statica di dati che si trova sull'ambito del mio controller. Nel mio controller ho una funzione che viene chiamata su ng-change del menu a discesa in modo da poter eseguire alcune azioni quando il valore cambia.

Tuttavia, quello che sto scoprendo è che la proprietà del modello ng viene impostata come una stringa JSON piuttosto che un oggetto javascript effettivo, il che rende impossibile l'uso della notazione a punti per estrapolare le proprietà da quel modello.

Ecco la funzione che gestisce il valore della discesa cambiarsi:

$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); 
} 

Ecco un plunker della mia piena esempio: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

Non ho mai visto una proprietà che è destinato a ng-model fallo prima, tuttavia sono anche abbastanza nuovo per Angular, quindi è probabile che stia facendo qualcosa di sbagliato qui. Posso certamente fare qualcosa come $ .parseJSON() per convertire la stringa JSON in un oggetto, ma preferirei non farlo a meno che non sia necessario. Grazie per l'aiuto!

Answer 1

È necessario utilizzare ng-options sulla selezione se si desidera avere valori oggetto. In realtà creando le opzioni da soli, usando un ng-repeat solo consentirà di avere valori di stringa per le varie opzioni:

<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

Grazie Karl! ho lottato un giorno con questa

come una nota per gli altri che hanno problemi simili, come ho fatto io, quando si utilizza un modello ng non è accessibile e definito nel controllore/direttiva ho risolto in questo modo.

//country.Model ha dei nodi di codice e nome

* * 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; 
    };