CODEWITHSUNDEEP
angularjs
user7397787
user7397787

Reputation: 1470

How to get selected option value from dropdown using angular

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>

Upvotes: 0

Views: 5015

Answers (1)

Sai
Sai

Reputation: 2658

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.

Upvotes: 1

Related Questions