angolare ui-select: Come associare un valore solo selezionato per ng-modello

Question

$scope.property = new Property(); 
$scope.property.propertyType = {}; 

$scope.propertyTypes = [ 
    { value: 'ResidentialPlot', name: 'Residential Plot' }, 
    { value: 'CommercialPlot', name: 'Commercial Plot' }, 
    { value: 'Apartment', name: 'Apartment/Flat' }, 
    { value: 'Townhouse', name: 'Townhouse' }, 
    { value: 'House', name: 'Single Family House' }, 
    { value: 'Commercial', name: 'Commercial Property' } 
]; 

<label for="ptype" class="col-sm-2 control-label">Property Type</label> 
<p>Populated: {{property.propertyType}}</p> 
<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type"> 
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match> 
    <ui-select-choices repeat="propType in propertyTypes"> 
     <span ng-bind-html="propType.name"></span> 
     <small ng-bind-html="propType.value"></small>  
</ui-select-choices> 

Questo mi dà:

$scope.PropertyType = {"value":"Apartment","name":"Apartment/Flat"} 

PropertyType nel mio schema è solo una stringa quindi voglio legare valore selezionato anziché selezionato Articolo JSON.

$scope.PropertyType = "Apartment" 

Cosa devo associare al mio modello NG per ottenere questo?

Answer 1

È necessario cambiare nella tua selezione ingresso l'attributo ng-modello per selected_propertyType e guardarlo quando cambia, quindi estrarre valore e assegnarlo a propertyType

$scope.property = new Property(); 
$scope.property.propertyType = {}; 

$scope.propertyTypes = [ 
    { value: 'ResidentialPlot', name: 'Residential Plot' }, 
    { value: 'CommercialPlot', name: 'Commercial Plot' }, 
    { value: 'Apartment', name: 'Apartment/Flat' }, 
    { value: 'Townhouse', name: 'Townhouse' }, 
    { value: 'House', name: 'Single Family House' }, 
    { value: 'Commercial', name: 'Commercial Property' } 
]; 

$scope.$watch('selected_propertyType',function(newValue,oldValue){ 
     if (newValue && newValue!=oldValue){ 
      $scope.propertyType = $scope.selected_propertyType.value; 

     } 

}) 


<label for="ptype" class="col-sm-2 control-label">Property Type</label> 
<p>Populated: {{property.selected_propertyType}}</p> 
<ui-select ng-model="property.selected_propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type"> 
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match> 
    <ui-select-choices repeat="propType in propertyTypes"> 
     <span ng-bind-html="propType.name"></span> 
     <small ng-bind-html="propType.value"></small>  
</ui-select-choices> 

Answer 2

È possibile utilizzare il select as notazione:

repeat="propType as propType.value for propType in propertyTypes" 

Answer 3

Non è necessario l'orologio $.

<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type"> 
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match> 
    <ui-select-choices repeat="propType.value as propType in propertyTypes track by $index | filter: $select.search"> 
     <div ng-bind-html="propType.value | highlight: $select.search"></div>  
</ui-select-choices> 

Answer 4

Ho avuto lo stesso problema. Ho guardato la documentazione in:

https://github.com/angular-ui/ui-select/wiki/ui-select-choices

Il modo migliore per farlo è:

<ui-select ng-model="animal.names"> <ui-select-match>{{$select.selected.name}}</ui-select-match> <ui-select-choices group-by="groupFind" repeat="value.id as value in animals | filter: $select.search"> <div ng-bind-html="value.name | highlight: $select.search"></div> </ui-select-choices> </ui-select>

Nota come siamo in grado di specificare value.id a ripetizione, pur utilizzando il valore. nome per ciò che viene mostrato all'interno della casella combinata. Questo funzionerà con il modello ng impostato su value.id (qualunque cosa sia stata salvata).

Ho verificato che questo funziona per me. Pubblicazione qui perché Google porta le persone a questa pagina.