Угловая UI-выберите: Как привязать только выбранное значение в нг-модель

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> 

Это дает мне:

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

PropertyType в моей схеме это просто строка, поэтому я хочу, чтобы связать выбранное значение вместо выбранного JSON.

$scope.PropertyType = "Apartment" 

Что я должен связывать с моей ng-моделью, чтобы получить это?

Answer 1

Вам нужно изменить в выберите входной атрибут нг-модель для selected_propertyType и смотреть его, когда он изменяет, а затем извлечь значение и присвоить его 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

Вы можете использовать select as обозначения:

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

Answer 3

Вам не нужны $ watch.

<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

У меня была та же проблема. Я посмотрел документацию:

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

Лучший способ сделать это:

<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>

Обратите внимание, как мы можем указать value.id в повторении, при этом используя значение. имя для того, что показано в поле со списком. Это будет работать с установкой ng-модели на значение.id (все, что было сохранено).

Я подтвердил, что это работает для меня. Публикация здесь, потому что Google приводит людей на эту страницу.