Umesh AP Umesh AP - 16 days ago 5
HTML Question

Working with HTML select in Angular JS

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?

Answer

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.