Açısal UI Seçimi2, ng-modeli neden JSON dizesi olarak ayarlandı?

Question

Angular-ui'nin select2'sini oldukça basit bir açılır menü için kullanıyorum. Denetleyicimin kapsamı üzerinde duran statik bir veri dizisi tarafından destekleniyor. Denetleyicimde, değer değiştiğinde bazı eylemleri gerçekleştirebilmem için açılır menüde ng değişimini gerektiren bir işlev var. Bununla birlikte, bulduğum şey, ng modelinin özelliğinin, gerçek bir javascript nesnesi yerine bir JSON dizesi olarak ayarlanmasıdır; bu, bu modelin özelliklerini kaldırmak için nokta gösteriminin kullanılmasını imkansız kılar. İşte

açılan değerini kolları işlevi değiştirilen var: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

Ben ng-modeli için kaçınılmazdır bir özellik görmedim: Burada

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

benim tam örnek bir plunker var Bunu daha önce yapın, ancak aynı zamanda Angular için oldukça yeniyim, bu yüzden burada yanlış bir şey yapıyorum. JSON dizgisini bir nesneye dönüştürmek için kesinlikle $ .parseJSON() gibi bir şey yapabilirim, ama yapmam gerekmedikçe tercih ederim. Yardımlarınız için teşekkürler!

Answer 1

Nesne değerlerine sahip olmak istiyorsanız, seçiminizde ng seçeneklerinden birini kullanmanız gerekir. Aslında sadece çeşitli seçenekleri için dize değeri bulunan sağlayacak bir ng tekrarı kullanarak seçenekleri kendiniz yaratarak:

<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

teşekkürler Karl! Yaptığım olarak erişilebilir ve ben böyle çözülür kontrolör/yönergede tanımlanmayan bir ng-modeli kullanılırken diğerleri benzer sorunlarınız için bir not olarak bu

ile günde mücadele etti.

//country.Model

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