How to set default value for angular ui-select

Question

Question:

how to set default value for angular ui-select

outliers are extracted from the object, and the object does not have a default value.

and ui-select should set the default value in Frontend.

eg:

outliers look like this

1 - all fruits 2-pin 3-banana 4-water melon

a value from 2 to 4 comes from an object sent from the server. But Frontend needs to set a default value, i.e. 1 - all fruits

Referring to the example below, install via ui-select2, how to transfer this to ui-select?

<select ng-model="fID" class="select" ui-select2 data-placeholder="select fruit"> <option value="">All fruits</option> <option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option> </select> <ui-select theme="select2" ng-model="fruits.selected"> <ui-select-match placeholder="select please" allow-clear="false"> {{$select.selected.name}} </ui-select-match> <ui-select-choices repeat="f in fruits | filter:$select.search"> <div ng-bind-html="f.name | highlight: $select.search:'underline'"></div> </ui-select-choices> </ui-select> 

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview https://github.com/angular-ui/ui-select Link: angular -ui / ui-select

Answer 1

you did not use an identifier or something similar for the parameter value, so ui-select compares the address of the object to see if it is selected.

 var p1 = { name: 'Adam', email: ' [e-mail] ', age: 10 }; $scope.person = {selected: p1}; $scope.people = [ p1, { name: 'Amalie', email: ' [e-mail] ', age: 12 }, { name: 'Wladimir', email: ' [e-mail] ', age: 30 }, { name: 'Samantha', email: ' [e-mail] ', age: 31 }, { name: 'Estefanía', email: 'estefaní [e-mail] ', age: 16 }, { name: 'Natasha', email: ' [e-mail] ', age: 54 }, { name: 'Nicole', email: ' [e-mail] ', age: 43 }, { name: 'Adrian', email: ' [e-mail] ', age: 21 } ]; 

change the plunker like this and you will have the default value selected.

to set the default value for viewing, you can use ng-init and set the first object as selected

Answer 2

I found this working example: http://jsfiddle.net/NfPcH/28/

Angular code:

 <a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses"> {{ showStatus() }} </a> 

Controller:

 app.controller('Ctrl', function($scope, $filter) { $scope.user = { status: 2 }; $scope.statuses = [ {value: 1, text: 'status1'}, {value: 2, text: 'status2'}, {value: 3, text: 'status3'}, {value: 4, text: 'status4'} ]; $scope.showStatus = function() { var selected = $filter('filter')($scope.statuses, {value: $scope.user.status}); return ($scope.user.status && selected.length) ? selected[0].text : 'Not set'; }; }); 

Answer 3

In your controller add the following code:

  $scope.fruits.selected = {name: 'All fruits'}; 

The above default value will be selected in the drop-down list.