how to set a default value for angular ui-select

Question

Question :

how to set default value to the angular ui-select

drop down values are fetched from object and object wont be having default value.

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

eg:

drop down values are as follows

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

value from 2 to 4 are derived from object sent from server.but Frontend need to set default value ie 1 - all fruits

Referring to the below example set via ui-select2 how to migrate this in 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

ng-init will set a default value: https://docs.angularjs.org/api/ng/directive/ngInit — Cameron Chapman, Dec 23 '14 at 19:49

score 2 · Answer 1 · answered Dec 23 '14 at 16:06

2

you didnt use an id or something like that for option value so ui-select compares object address to understand if it is selected.

var p1 = { name: 'Adam',      email: 'adam@email.com',      age: 10 };
  $scope.person = {selected: p1};
  $scope.people = [
    p1,
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
  ];

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

to set the default value on view you can use ng-init and set first object as selected

answered Dec 23 '14 at 16:06

bahadir

709
1
11
28

1

also we can set $scope.person.selected = p1 ; – praveenpds Jan 07 '15 at 13:45
i didn't understand what you are trying to say? – bahadir Jan 26 '15 at 08:42
I didn't get it either, you only showed what to do on the backend but not what should be done on the directive itself. – user3718908x100 Sep 23 '15 at 15:08
i'll create plunkr today for this @AqibMumtaz – bahadir Oct 20 '15 at 11:02

score 0 · Answer 2 · edited Feb 13 '17 at 13:15

0

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';
  };
});

edited Feb 13 '17 at 13:15

Yasin Okumuş

2,299
7
31
62

answered Oct 20 '15 at 14:38

Aqib Mumtaz

4,936
1
36
33

Hi Aqib, please try to include code snippet into your answer – asdf_enel_hak Oct 20 '15 at 14:40
Stackoverflow is creating trouble while attaching url – Aqib Mumtaz Oct 20 '15 at 14:44
1

Yes it is the case if you include one line answer with link, now you can update your link in appropriate way – asdf_enel_hak Oct 20 '15 at 15:24

score 0 · Answer 3 · answered Mar 11 '16 at 14:35

0

In your controller add the following code:

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

The above will set the default selected value to the drop down.

answered Mar 11 '16 at 14:35

Naren

1,300
14
32

how to set a default value for angular ui-select

3 Answers3