Question

我使用add resource按钮有两个下拉菜单，当我点击add resource按钮时，我需要将选定的选项值从下拉列表传递到insertResource方法。
如何获取selected option value ??我知道我们可以在jquery中使用option:selected轻松地完成它但是我想用角度来做它。
任何帮助？

<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>

Answer 1

如果您的问题是获取select所选项目的数据。使用ng-model指令完成如下：

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

在控制器中：

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

如何使用angular从下拉列表中选择选项值

1 个答案: