web-dev-qa-db-fra.com

Angular ui-select: Comment lier uniquement la valeur sélectionnée à ng-model

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

Cela me donne: 

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

PropertyType dans mon schéma est juste une chaîne, je veux donc lier la valeur sélectionnée au lieu de l'élément JSON sélectionné.

$scope.PropertyType = "Apartment"

Que dois-je lier à mon modèle pour obtenir cela?

angularjsui-select
11
user3072575

Vous devez modifier l'attribut ng-model dans votre entrée sélectionnée en selected_propertyType et le regarder quand il change, puis extraire la valeur et l'assigner à 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>
11
levi

Vous n'avez pas besoin de regarder $.

<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>
35
Carla França

J'ai eu le même problème. J'ai cherché la documentation dans:

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

La meilleure façon de faire est:

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

Notez comment nous pouvons spécifier value.id de manière répétée tout en utilisant toujours value.name pour ce qui est affiché dans la liste déroulante. Cela fonctionnera avec ng-model défini sur value.id (tout ce qui a été enregistré).

J'ai vérifié que cela fonctionne pour moi. Publier ici parce que Google attire les internautes vers cette page.

4
Vijay

Vous pouvez utiliser la notation select as:

repeat="propType as propType.value for propType in propertyTypes"
0
Himmet Avsar