Question

我有一个带有以下功能的角度应用程序：

    $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页面中，我有以下两个字段：

<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元素中选择值。绑定变量并使用变量本身更容易。我在JSFiddle中创建了你的例子：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);
        };
}]);

希望这有帮助！

Answer 2

你出错的最大的地方是尝试直接从Angular控制器中的DOM访问值，而不是依靠Angular将作用域上的属性绑定到输入并为你处理所有这些。

我在Plunkr中制作了一个演示＆＃34; Angular方式＆＃34;接近这个。

控制器的内容是：

app.controller('MainCtrl', function($scope, StudentSearchService) {
  $scope.campus = [
    {name: "Campus 1"},
    {name: "Campus 2"}
    ];

  $scope.searchParams = {
    lastName: "",
    campus: null
  };

  $scope.search = function() {
    StudentSearchService.getStudents($scope.searchParams.lastName, 
            $scope.searchParams.campus.name, 
            function(data) {
              if (data !== null) {
                $scope.students = data;
              }
            });
  }
});

然后你的标记变为：

  <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" ng-model="searchParams.lastName" />
  </div>
  <div class="form-group col-lg-4 col-md-4">
    <label for="campus">Campus:</label>
    <select class="form-control" id="campusid" ng-model="searchParams.campus" ng-options="camp.name for camp in campus">
      <option value="">ALL - District</option>
    </select>
  </div>

请注意使用ng-model将输入绑定到范围属性。另请注意，控制器中没有DOM访问代码。这使测试更容易，并允许您在没有任何DOM的情况下测试控制器。这是Angular的核心理念。

Angular js没有通过id来检索下拉列表的值

2 个答案: