how to pass select option value in angularjs

Question

I have a below code snippet

HTML

 <div ng-controller="MyCtrl">
  <div ng-if="quan!=true">
  <select ng-model="selectedItems" ng-init="selectedItems = selectedItems + ''">
    <option ng-repeat="value in arr | limitTo:quantity">{{value}}</option>  
</select>
  </div> 

<div>
    <a href="#" ng-click="submit()">Submit</a>
</div>
</div>

JS

$scope.arr = [];
$scope.quan=false;
 for(var a=1; a<=10; a++) {  
    $scope.arr.push(a); 
 }
 $scope.selectedItems = $scope.arr[0];
 $scope.quantity = 10; //just hardcoded

Here, when I click submit button, I didn't get the value whatever I have selected in the dropdown. I was getting undefined for selectedItems.

And also first option needs to be selected in the select box.

I think I'm missing something!

i know that it is type error

UI_Dev
– UI_Dev

2017-04-04 08:56:45 +00:00
Commented Apr 4, 2017 at 8:56 — UI_Dev
– UI_Dev, Commented Apr 4, 2017 at 8:56

anoop · Accepted Answer · 2017-04-04 09:22:03Z

2

After changing to $scope.selectedItems = $scope.arr[0];, you need to initialize your option value ng-init="selectedItems = selectedItems + ''" because angular use strict comparison.

See this working fiddle.

also you don't need to pass selected item in click event, submit(selectedItems). because it is already in controller scope.

Also I would recommend changing your options structure to avoid ng-init.

Something like :

options = [{
   name: 'key1',
   value: 'value1'
}, {
   name: 'key2',
   value: 'value2'
}];

answered Apr 4, 2017 at 9:22

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

6 Comments

UI_Dev Over a year ago

try this fiddle jsfiddle.net/dy1vw7v5/3 , it we make ng-if condiiton, it is failing to work

anoop Over a year ago

@UI_Dev: because ng-if creates its own scope. To avoid it utilise prototypcal inheritance of javascript., which persist scope for angular. see this fiddle

UI_Dev Over a year ago

great :) you saved my day

UI_Dev Over a year ago

if u see this fiddle, jsfiddle.net/dy1vw7v5/6 how do i differentiate each and every select dropdowns? all are showing the same value if selected

anoop Over a year ago

because you are creating same html inside ng-repeat="product in colors", you are not utilizing iterator product to make it dynamic, I suggest to close this thread, and please ask a separate question for this.

|

Sachet Gupta · Accepted Answer · 2017-04-04 08:53:20Z

0

HTML:

  <select ng-model="selectedItem" >
        <option ng-repeat="value in arr | limitTo:quantity">{{value}}</option>  
    </select>

    <div>
        <a href="#" ng-click="submit();">Submit</a>
    </div>

JS:

    $scope.arr = [];
     for(var a=1; a<=10; a++) {  
        $scope.arr.push(a); 
     }
     $scope.selectedItem = $scope.arr[0];
     $scope.quantity = 10; //just hardcoded
     $scope.submit = function(){
        console.log($scope.selectedItem); // you will get the selected value here, if you want it after button click. 
     };

Because of angular's 2 way binding, it would be available as soon as you select something. You do not have to pass it as function parameter from HTML

answered Apr 4, 2017 at 8:53

Sachet Gupta

8255 silver badges18 bronze badges

1 Comment

UI_Dev Over a year ago

try this fiddle jsfiddle.net/dy1vw7v5/3 , it we make ng-if condiiton, it is failing to work\

Collectives™ on Stack Overflow

how to pass select option value in angularjs

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related