Set a default value in a select with simple array in AngularJS

Question

I have a simple array:

items = ['All','item1','item2','item3'];

I have been tried

<select ng-model="ctrl.itemSelected" ng-change="ctrl.searchItem()">
    <option ng-repeat="item in ctrl.items" value="{{ctrl.items.indexOf(item)}}">{{item}}</option>
</select>

However, my select is being rendered in the page as

<select ... >
    <option value='?' selected> </option>
    <option value='0'> All </option>
    <option value='1'> Item1 </option>
    <option value='2'> Item2 </option>
    <option value='3'> Item3 </option>
</select>

So I would like this were <option value='0'> All </option> my option selected at the beginning

What can I do?

declare your initialize value like these - data-ng-init="ctrl.itemSelected=0" or from controller (js) — Aravinthan K
– Aravinthan K, Commented Jul 26, 2016 at 8:46
I tried it, but it was not enough. the first option with value="?" appears yet. — Kelyane
– Kelyane, Commented Jul 26, 2016 at 9:35

Pankaj Parkar · Accepted Answer · 2016-07-26 08:52:51Z

3

Just do in your controller to initialize itemSelected model:

ctrl.itemSelected = items[0];

edited Jul 26, 2016 at 8:52

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jul 26, 2016 at 8:51

Alex M

2,8467 gold badges31 silver badges36 bronze badges

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

5 Comments

Kelyane Over a year ago

I tried it, but it's not work yet. The first option value="?" has been the initial element when I load the page.

Alex M Over a year ago

@Kelyane It seems that's because of value="{{ctrl.items.indexOf(item)}}". Just remove it and try, should work properly.

Kelyane Over a year ago

It works, but I also need the value as a number of my index array. Do you have any suggestion for it?

Alex M Over a year ago

@Kelyane You can get it in the controller if it's acceptable for you, ex. ctrl.items.indexOf(ctrl.itemSelected)

Kelyane Over a year ago

Perfect! Thank you.

Sa E Chowdary · Accepted Answer · 2016-07-26 08:49:53Z

1

try this

<select ng-init="funcName= options[0]" ng-model="ctrl.itemSelected" ng-change="ctrl.searchItem()">
    <option ng-repeat="item in ctrl.items" value="{{ctrl.items.indexOf(item)}}">{{item}}</option>
</select>

answered Jul 26, 2016 at 8:49

Sa E Chowdary

2,09518 silver badges31 bronze badges

Comments

Raman Sahasi · Accepted Answer · 2016-07-26 09:36:52Z

1

The issue is that the model which you've kept for your select needs to have an initial value. Since ctrl.itemSelected have no initial value, so your select option is set to a blank value at starting

Initialize your select's model to a value from options. Like this

$scope.ctrl.itemSelected = 0;

edited Jul 26, 2016 at 9:36

answered Jul 26, 2016 at 8:51

Raman Sahasi

32k9 gold badges63 silver badges74 bronze badges

Comments

rejo · Accepted Answer · 2016-07-26 09:51:54Z

1

Use ng-selected in option

var app = angular.module('mapp', []);

app.controller('MainCtrl', function($scope) {
   $scope.items =  ['All','item1','item2','item3'];
   $scope.itemSelected = $scope.items[2];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="mapp" ng-controller="MainCtrl">
{{itemSelected}}
  
<select ng-model="itemSelected">
    <option  ng-repeat="item in items" ng-selected="{{item == itemSelected}}" value="{{items.indexOf(item)}}">{{item}}</option>
</select>
  
</body>

edited Jul 26, 2016 at 9:51

answered Jul 26, 2016 at 8:56

rejo

3,3405 gold badges29 silver badges35 bronze badges

2 Comments

Kelyane Over a year ago

I also tried it, but it didn't work. I mean the item with ng-selected=true is correct, but when I load the page the first element is the option with value="?", however when I click in another option, this first element no longer appears.

rejo Over a year ago

I update the code with your array, Where is the error getting for you ?

Naveen Kumar · Accepted Answer · 2016-07-26 10:23:19Z

1

array used as

$scope.items = ['All','item1','item2','item3'];

use the the Initialize the modal  
 ctrl.itemSelected = $scope.items[0];


<select ng-model="itemSelected">
    <option  ng-repeat="item in items" ng-selected="{{item == itemSelected}}" value="{{items.indexOf(item)}}">{{item}}</option>
</select>

answered Jul 26, 2016 at 10:23

Naveen Kumar

501 silver badge8 bronze badges

Collectives™ on Stack Overflow

Set a default value in a select with simple array in AngularJS

5 Answers 5

5 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related