Working with HTML select in Angular JS

Question

I am developing my first Angular application. My page contains textbox & html select element. I bind that select element using

 <select data-ng-model="ddlLocation">
      <option value="">--Select--</option>
      <option data-ng-repeat="location in vm.arrLocations" value="{{location.srNo}}">{{location.name}}</option>
 </select>

On controller side, i populate arrLocations as

 this.getLocationsOnSuccess = function (response) {
        //vm.locations = response.data; 
        var arrLocations = new Array();

        var i;
        for (i = 0; i < response.length; i++) {
            vm.locationSrNo = response[i].srNo;
            vm.locationName = response[i].name;

            arrLocations.push({
                srNo: response[i].srNo,
                name: response[i].name
            });  
        }

        vm.arrLocations = arrLocations;
    }

To get default value selected :

vm.ddlLocation = "--Select--";

Now how to get selected value on button click. Is there any alternate approach for CRUD functionality with HTML select in Angular JS?

u can use ng-change function and pass your model to that

Sa E Chowdary
– Sa E Chowdary

2016-11-22 10:07:16 +00:00
Commented Nov 22, 2016 at 10:07 — Sa E Chowdary
– Sa E Chowdary, Commented Nov 22, 2016 at 10:07

Marcus Höglund · Accepted Answer · 2016-11-22 10:24:41Z

1

You should have a look at NgOptions which is a great feature in angularjs. To implement this in your example

<select ng-model="ddlLocation" ng-options="location as location.name for location in vm.arrLocations">
      <option value="">--Select--</option>
 </select>

The location gets bind to the option value and the location.name gets displayed in the option text. The "--Select--" will be selected as default as the ddlLocation is null.

When a option is selected the location value of the option will be the value of the NgModel ddlLocation.

To get the value of the selected option you just use the ng-model value ddlLocation which will hold the selected location object. In your controller you get it as:

$scope.randomFunc = function(){
    var value = $scope.ddlLocation.value;
    var name =  $scope.ddlLocation.name;
 };

answered Nov 22, 2016 at 10:24

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

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

Comments

user4676340 · Accepted Answer · 2016-11-22 10:12:51Z

1

Try this :

this.getLocationsOnSuccess = function (response) {
    //vm.locations = response.data; 
    var arrLocations = new Array();

    var i;
    for (i = 0; i < response.length; i++) {
        vm.locationSrNo = response[i].srNo;
        vm.locationName = response[i].name;

        arrLocations.push({
            srNo: response[i].srNo,
            name: response[i].name
        });  
    }

    vm.arrLocations = arrLocations;

    vm.whatIsMyValue = function() {
        alert(vm.ddLocation);
    }
}

and in your HTML :

<button ng-click="whatIsMyValue()"></button>

It will display your value. As you can see, you can now use it as you want.

answered Nov 22, 2016 at 10:12

user4676340

5 Comments

Ganesh UP Over a year ago

I already tried using vm.ddlLocation on controller But it will always return default option ie '--Select--'

user4676340 Over a year ago

well that's because you need to put vm.ddLocation in your select, as you did with other variables.

Ganesh UP Over a year ago

"you need to put vm.ddLocation in your select " Means??

user4676340 Over a year ago

<select data-ng-model="vm.ddlLocation"> @UmeshAP

Ganesh UP Over a year ago

Silly mistake while coding. Now code works as expected. Thanks for pointing out.

Collectives™ on Stack Overflow

Working with HTML select in Angular JS

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related