javascript - Angular js 不通过 id 的下拉列表检索值

Question

我有一个具有以下功能的 Angular 应用程序:

    $scope.search= function(){
        var lname = document.getElementById("lastname").value;
        var campus2 = document.getElementById("campusid").value;
        StudentSearchService.getStudents(lname, campus2, function(data){
            if(data!=null){
                $scope.students = data;
            }
        });
    }

在 html 页面中，我有以下 2 个字段:

<div class="form-group col-lg-4 col-md-4">
<label for="lastname"> Last Name: </label>
<input type="text" id="lastname" placeholder="Last Name" class="form-control" />
</div>
<div class="form-group col-lg-4 col-md-4">
<label for="campus"> Campus:</label>
<select class="form-control" id="campusid" ng-model="newcampus" ng-options="camp.name for camp in campus" >
<option value="">ALL - District</option>
</select>
</div>

当我单击“搜索”时，lname 的值被很好地检索，但下拉列表 campus2 中的值未被初始化。因此，未正确调用服务。

我哪里错了？

Answer 1

首先，如果您使用的是 Angular，则没有必要从 DOM 元素中选取值。绑定(bind)变量和使用变量本身要容易得多。我已经在 J​​SFiddle 中创建了您的示例:http://jsfiddle.net/rmadhuram/1n14eqfw/2/

HTML:

<div ng-app="app" ng-controller="FormController">
    <div class="form-group col-lg-4 col-md-4">
        <label for="lastname">Last Name:</label>
        <input type="text" id="lastname" ng-model="lastName" placeholder="Last Name" class="form-control" />
    </div>
    <div class="form-group col-lg-4 col-md-4">
        <label for="campus">Campus:</label>
        <select class="form-control" id="campusid" ng-model="newcampus" ng-options="camp.name for camp in campus">
        </select>
    </div>

    <button ng-click='search()'>Search</button>
</div>

JavaScript:

angular.module('app', [])
    .controller('FormController', ['$scope', function ($scope) {
        $scope.campus = [
            { name: 'campus 1' },
            { name: 'campus 2' }
        ];

        $scope.newcampus = $scope.campus[0];
        $scope.lastName = '';

        $scope.search = function() {
            alert('Name: ' + $scope.lastName + ' Campus: ' + $scope.newcampus.name);
        };
}]);

希望这对您有所帮助!