Angularjs Select Option Selected Default

Question

I started using angularjs in a project. Here i have a quest. I have the below HTML

<div>
<label for="lastname">Bank Name :</label> 
<select ui-select2 ng-model="bank.id">
    <option></option>
    <option ng-repeat="bank in banks" value="{{bank.id}}">{{bank.text}}</option>
</select>
</div>

I iterate all the banks to the dropdown. User selects and press SAVE. I correctly got the id and save it to the DB. When the user comes back i could not set the value of the drop down to the one he selected. I do this in the controller.js

$http.get('/AdServerLongTail/api/user').
success(function(data, status, headers, config) {
    if(status == 200){
        $scope.id = (data["id"]);// user id                 
        $scope.bank.id = (data["bankId"]);                  
    }
}).
error(function(data, status, headers, config) {
    alert("fail");
});

How can I set it to bankID 11 letssay, which is XX Bank?

astone26 · Accepted Answer · 2013-05-12 08:36:18Z

16

You should NOT use ng-repeat in this way. Please look at ngOptions http://docs.angularjs.org/api/ng.directive:select

answered May 12, 2013 at 8:36

astone26

1,24211 silver badges17 bronze badges

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

4 Comments

astone26 Over a year ago

I hear you. But, just because an external library does not support it, does not mean it is correct.

Rafal Pastuszak Over a year ago

@Lander, I agree it's not correct, but unfortunately it's the only way to use select2. You can find something different or keep it this way. I would suggest writing a better directive to access s2, since the idea behind directives is providing an API without exposing the way it works internally. In ideal world the directive API should work with ng-select. Using ng-repeat won't break anything, and I wouldn't consider it a hack. What bothers me more is the select2 can be is horribly slow in angular.

astone26 Over a year ago

Thanks for the reply. But, as you stated, there is an issue of performance. Using ng-repeat in this way has a record of bad performance.

Kamil Szot Over a year ago

Using ng-repeat for generating options leads to performance problems with as few as hundred options.

Community · Accepted Answer · 2017-05-23 11:58:56Z

I am new to angular and struggled for this a bit. Here is the simple tag that does that , and it is ng-selected:

<option ng-repeat="bank in banks" value="{{bank.id}}" ng-selected="'11' == bank.id" >{{bank.text}}</option>

But again: Dont do it this way as advised by Lander. Rather use ng-options in <select>. Otherwise you will end up with empty first option in the dropdown.assign bank.selected.id in model.(here in your case ng-model is bank.id.)

<select ng-model="bank.selected.id" ng-change="someAngularfunction()" ng-options=" (''+bank.id) as (bank.id +' - '+ bank.text) for bank in banks">
                    <option value="">Select one</option>
</select>

Also remember that the option value will not show the bank-id in the options,rather it will show option value="0" or "1" or "3" which is index. But selected value in dropdown will be bound with bank.selected.id model. For example, if dropdown value is selected as for say bank.id=11 (XX Bank), the bank.selected.id will be set as "11".

Yagiz Ozturk · Accepted Answer · 2013-04-30 12:03:45Z

2

I found it, so easy how I did missed that. Here is the correct code.

<div>
<label for="lastname">Bank Name :</label> 
<select ui-select2 ng-model="bank">
    <option></option>
    <option ng-repeat="bank in banks" value="{{bank.id}}">{{bank.text}}</option>
</select>
</div>

$http.get('/AdServerLongTail/api/user').
success(function(data, status, headers, config) {
    if(status == 200){
        $scope.id = (data["id"]);// user id                 
        $scope.bank = (data["bankId"]);                  
    }
}).
error(function(data, status, headers, config) {
    alert("fail");
});

answered Apr 30, 2013 at 12:03

Yagiz Ozturk

5,4387 gold badges31 silver badges45 bronze badges

2 Comments

elliottregan Over a year ago

Is there a way to do this without Angular UI? I'm working on it, too.

taudep Over a year ago

Using repeat nested in options causes problems and doesn't work right with regular angular binding. It took me a bit to figure out why this technique was causing other Angular db to fail...

Collectives™ on Stack Overflow

Angularjs Select Option Selected Default

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related