AngularJS: how to get selected option value and send to controller

Question

how to get a value from select (code) and send to controller in angular for is using in the this controller??
My select consumes a web service code:

 <div class="form-group col-xs-12 offset-xs-2 col-md-3" ng-controller="productCtrl">
      <label for="selectProduct">Product</label> <br>
      <select class="form-control" id="product" required data-error="Select a Product!" tabindex="1">
              <option value="" selected >Select a Product!</option>
              <option value="{{product.codigo}}" ng-repeat="product in products">{{product.name}}</option>
      </select>
      <div class="help-block with-errors"></div>
 </div>

The concept with angular is that view should be controlled by the controller. Therefore you shouldn't really send the value to controller but let the controller control the view. Take a look at ngOption documentation and use ngModel to bind the value — Endless
– Endless, Commented Nov 1, 2016 at 17:18
Agree with the above -- definitely check out the ngOption documentation — Nathan Beck
– Nathan Beck, Commented Nov 1, 2016 at 17:43

Manos Pasgiannis · Accepted Answer · 2016-11-01 17:18:07Z

4

You have to use ng-model for this. Just change your select like this

<select class="form-control" id="product" ng-model="selectedProduct" required data-error="Select a Product!" tabindex="1">
    <option value="" selected >Select a Product!</option>
    <option value="{{product.codigo}}" ng-repeat="product in products">{{product.name}}</option>
</select>

Then in your controller you can access its value using

$scope.selectedProduct

For mor info about how the NgModel works you should read the docs

answered Nov 1, 2016 at 17:18

Manos Pasgiannis

1,8031 gold badge20 silver badges32 bronze badges

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

Comments

Matt Wisniewski · Accepted Answer · 2016-11-01 17:20:21Z

2

Use ngModel. You may also want to use ngOptions to generate the option tags for you.

For example:

<select ng-model="value" ng-options="option.value as option.label for option in options"></select>

The value will be available on your controller's scope ($scope.value). $scope.options should be an array of objects defining your options.

answered Nov 1, 2016 at 17:20

Matt Wisniewski

918 bronze badges

Collectives™ on Stack Overflow

AngularJS: how to get selected option value and send to controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related