How select an item from dropdown list in angularjs?

Question

How select an item from dropdown list in angularjs,Here I am using normal select list but not from object array.

If I am using ng-repeat then I can select one,

but here how can I do the same?

 <select class="form-control" ng-model="range" ng-change="updateRange()">
        <optgroup label="Current">
            <option value="1.1">Today</option>
            <option value="1.2">This Week</option>
            <option value="1.3">This Month</option>
            <option value="1.4">This Quarter</option>
            <option value="1.5">This Year</option>
        </optgroup>
        <optgroup label="Previous">
            <option value="2.1">Yesterday</option>
            <option value="2.2">Previous Week</option>
            <option value="2.3">Previous Month</option>
            <option value="2.4">Previous Quarter</option>
            <option value="2.5">Previous Year</option>
        </optgroup>
        <optgroup  label="Custom">
            <option ng-value="3">Custom</option>
        </optgroup>
    </select>

@maurcy it is not working

gsk
– gsk

2015-05-05 08:54:17 +00:00
Commented May 5, 2015 at 8:54 — gsk
– gsk, Commented May 5, 2015 at 8:54

maurycy · Accepted Answer · 2015-05-05 08:51:42Z

2

Simply assign value to the model that corresponds with option value

http://plnkr.co/edit/bB4Y8aOufk9UL3oRRHD7?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.range = 2.4
});

answered May 5, 2015 at 8:51

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

Comments

Sanjeev Singh · Accepted Answer · 2015-05-05 12:27:51Z

1

Try to put your model data in form of an array :

In your controller

$scope.ModelValues = JSONResponse;

JSON Response should contain the value to be selected in the drop down i.e

JSONResponse = {"range" : "100"}

html:

<select class="form-control" ng-model="ModelValues.range" ng-change="updateRange()">
</select >

edited May 5, 2015 at 12:27

answered May 5, 2015 at 8:49

Sanjeev Singh

4,0963 gold badges36 silver badges39 bronze badges

6 Comments

Sanjeev Singh Over a year ago

use need ng-options if you have the values in your JSON Response or hard code as you did.

Sanjeev Singh Over a year ago

ok. great but you may feel my approach better when doing actual two way data binding for the whole page!

maurycy Over a year ago

and how exactly he loses two-way data binding with use of model?

Sanjeev Singh Over a year ago

How would you do two way binding if you get single JSON response for all field on the screen. Would you assign each and every variable in $scope one by one?

maurycy Over a year ago

I think you are missing the point, the question was about selecting an option in select and you do that the way I did in my answer, obviously when you receive json you assign it to single model if you have to use it in partial

|

Collectives™ on Stack Overflow

How select an item from dropdown list in angularjs?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related