How to get selected option value from dropdown using angular

Question

I have two drop downs with add resource button, when I click add resource button I need to pass selected option values from drop downs into insertResource method.
How to get selected option value??I know we can easily do it using option:selected in jquery But I want do it in angular.
Any help?

<body ng-app="intranet_App" ng-controller="myCtrl" ng-init="init()">
    <div class="container">
        <div class="row">       
            <div>
                <label class="displayBlock margin">Project Name</label>
                <input type="text" name="name" class="currentProjectName">
            </div>
            <div>
                <label class="displayBlock margin">Resource Name</label>
                <select name="ResourceInsert"  id="allocateResource"><option data-ng-repeat="data in resourceList" value="{{data.EmpId}}">{{data.ResourceName}}</option></select>
            </div>
            <div>
                <label class="displayBlock margin">Role Name</label>
                <select name="ResourceInsert"  id="allocateRole"><option data-ng-repeat="data in roleList" value="{{data.RoleId}}">{{data.RoleName}}</option></select>
            </div>
        </div>
        <div class="row">
            <button class="btn btn-primary addResource" ng-click="insertResource()">Add Resource</button>    
        </div>
    </div>    
</body>
<script>
    var app = angular
                    .module('intranet_App', [])
                    .controller('myCtrl', function ($scope,$http) {
                        $scope.init = function () {
                            $scope.getProjId();
                            $scope.ResourceJson();
                            $scope.RoleJson();
                        }
                        $scope.getProjId = function () {
                            var url = document.URL;
                            var id = decodeURI(/id=([^&]+)/.exec(url)[1]);
                            var projectName = decodeURI(/val=([^&]+)/.exec(url)[1]);
                            $('.currentProjectName').val(projectName)
                        }
                        $scope.ResourceJson = function () {
                            $http.post('/Project/empList').then(function (response) {
                                $scope.resourceList = response.data;
                                console.log($scope.resourceList)
                                })
                        }
                        $scope.RoleJson = function () {
                            $http.post('/Project/roleList').then(function (response) {
                                $scope.roleList = response.data;
                                console.log($scope.roleList)
                               })
                        }
                        $scope.insertResource = function () {

                        }
                    });
</script>

Sai · Accepted Answer · 2017-06-13 08:47:00Z

1

If your questions is getting data of selected item of select. It is done as follows using ng-model directive:

<select name="ResourceInsert"  id="allocateResource"  ng-model="selectedValue">
    <option data-ng-repeat="data in resourceList" value="{{data.EmpId}}">{{data.ResourceName}}</option>
</select>

In Controller:

console.log($scope.selectedValue, "selected Value"); //Your selected value which is EmpId.

answered Jun 13, 2017 at 8:47

Sai

2,6685 gold badges34 silver badges49 bronze badges

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

7 Comments

user7397787 Over a year ago

I have 2 fields,both have same ng-model="selectedValue" right?then how can I pass both values?

Sai Over a year ago

Use different name for it.

Sai Over a year ago

name means different ng-model. Don't confuse with html name

user7397787 Over a year ago

One more help please I need to show select in field by default. I have added value="select" but its not showing..how can I do it

Sai Over a year ago

You can do like <option value="">Select</option>. It will be shown by default.

|

Collectives™ on Stack Overflow

How to get selected option value from dropdown using angular

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related