Angular ui-select: How to bind only selected value to ng-model

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>

This gives me:

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

PropertyType in my schema is just a string so I want to bind selected value instead of selected JSON Item.

$scope.PropertyType = "Apartment"

What should I bind to my ng-model to get this?

Carla França · Accepted Answer · 2015-07-19 16:29:02Z

40

You don't need $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>

answered Jul 19, 2015 at 16:29

Carla França

6311 gold badge5 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Garcia Over a year ago

Exactly what I was looking for. This should be the selected answer as it doesn't need extra code to make it work. Thanks.

levi · Accepted Answer · 2015-01-26 00:39:19Z

You need to change in your select input the ng-model attribute to selected_propertyType and watch it when it changes, then extract value and assign it to 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>

Vijay · Accepted Answer · 2017-06-14 21:08:28Z

I had the same problem. I looked up the documentation in:

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

The best way to do this is:

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

Note how we are able to specify value.id in repeat while still using value.name for what is shown within the combo box. This will work with ng-model being set to the value.id (whatever was saved).

I verified this works for me. Posting here because Google brings people to this page.

Himmet Avsar · Accepted Answer · 2015-01-26 01:31:59Z

1

You can use the select as notation:

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

edited Jan 26, 2015 at 1:31

answered Jan 26, 2015 at 0:37

Himmet Avsar

1,53116 silver badges23 bronze badges

5 Comments

user3072575 Over a year ago

Tried this and it is breaking the select altogether while capturing the last value, could you please elaborate?

user3072575 Over a year ago

Here is what I got: Error: [ngRepeat:iidexp] 'item' in 'item in collection' should be an identifier or '(key, value)' expression, but got 'propType.value

PSL Over a year ago

I think it should be propType.value as propType.name for propType in propertyTypes (select as label for value in array) so that the ng-model reflects value and select shows the text as name. But i dont know how uiselect behaves though.

user3072575 Over a year ago

Didn't work either. Not sure if "select as" feature itself was implemented in ui-select. Here is an issue reported back in May. github.com/angular-ui/ui-select/issues/68

user3072575 Over a year ago

Here is another articular about ng-options with standard select. Not sure if the same is extended to ui-select undefinednull.com/2014/08/11/…

Collectives™ on Stack Overflow

Angular ui-select: How to bind only selected value to ng-model

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Linked

Related