Angular js not retrieving value by id's for dropdowns

Question

I have an angular app with the following function:

    $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;
            }
        });
    }

and in the html page, I have the following 2 fields:

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

When i click to Search, the value for the lname is being retrieved just fine but the value from the dropdown campus2 is not being being initialized. Thus the call to the service is not being made properly.

Where am I going wrong?

Has nothing to do with Angular. See [How to get the selected value of dropdownlist using JavaScript?](http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript). — PM 77-1, Aug 07 '14 at 02:46
Take a look at the answers below. It is not recommended to fetch the values of DOM inside the controller. — khakiout, Aug 07 '14 at 03:00

score 3 · Accepted Answer · answered Aug 07 '14 at 02:54

First, it is not necessary to pick values from DOM elements if you are using Angular. It is way more easier to bind variables and use the variables themselves. I have created your example in 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);
        };
}]);

Hope this helps!

We basically did the same thing, Rajkumar. Great minds think alike, right? — GregL, Aug 07 '14 at 02:58
Hahha, i was supposed to give an answer but the two of you already did. — khakiout, Aug 07 '14 at 02:59
@GregL - haha.. we chose same variable name, function name and campus names :) — Rajkumar Madhuram, Aug 07 '14 at 03:00

score 3 · Answer 2 · answered Aug 07 '14 at 02:57

The biggest place you are going wrong is by trying to access values directly from the DOM inside your Angular controller, rather than relying on Angular to bind properties on the scope to your inputs and handle all of that for you.

I have made a version in Plunkr that demonstrates the "Angular way" of approaching this.

The guts of the controller is:

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;
              }
            });
  }
});

And then your markup becomes:

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

Note the use of ng-model to bind the inputs to scope properties. Also note there is no DOM access code in the controller. This makes it easier to test, and allows you to test your controller without any DOM at all. That is the core philosophy Angular is based around.

Angular js not retrieving value by id's for dropdowns

2 Answers2