使用angular.js在控制器页面中未获得任何值

Question

I am not getting any value from drop down list in controller file using angular.js.It is simple throwing following error.

$scope.subname is undefined

I am explaining my code below.

index.html

<table class="table table-bordered table-striped table-hover" id="dataTable" ng-app="myApp" ng-controller="tableCtrl">
    <tr>
        <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
            <BR>Day <i class="fa fa-long-arrow-down"></i>
        </td>
        <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
    </tr>
    <tbody id="detailsstockid">
        <tr ng-repeat="days in noOfDays">
            <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td>
            <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours" >
                <table style="margin:0px; padding:0px; width:100%">
                    <tr>
                        <td>
                            <select id="coy" name="coy" class="form-control" ng-model="subname">
                                <option value="">Select Cource</option>
                                <option value="A">Theory1</option>
                                <option value="B">Theory2</option>
                                <option value="C">Theory3</option>
                                <option value="D">Theory4</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData();">
                                <option value="">Select Faculty</option>
                                <option value="A">Faculty1</option>
                                <option value="B">Faculty2</option>
                                <option value="C">Faculty3</option>
                                <option value="D">Faculty4</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

script.js

var myApp = angular.module('myApp', []);


myApp.controller('tableCtrl', ['$scope',
      function($scope) {

        $scope.noOfDays = [];

        $scope.days = {
          '0': "Monday",
          '1': 'Tuesday',
          '2': 'Wednesday',
          '3': 'Thursday',
          '4': 'Friday'
        }

        $scope.hours = [
          '9AM :: 10AM',
          '10AM :: 11AM',
          '11:15AM :: 12:15PM',
          '12:15PM :: 01:15PM',
          '02PM :: 03PM',
          '03PM :: 04PM',
          '04PM :: 05PM'
        ]

        for (var i = 0; i < 5; i++) {
          $scope.noOfDays.push($scope.days[i]);
        }
         $scope.readData=function(){
         alert($scope.subname.value,$scope.facname.value);
         }
      }]);

Here when the ng-change event is executing that error is coming.I need when user will select any course data and faculty name ,it will store in a json variable with day and time.Here is my plunker example.Please help me to resolve this issue.

Answer 1

You have used ng-model="facname" and ng-model="subname" but for getting value you have used

alert($scope.subname.value,$scope.facname.value);

which will not work because $scope.subname needs to define in controller. But you can pass it to method and get in controller function like

$scope.readData = function(subname, facname, days, hour) {
      alert('name : ' + subname + ', facname : ' + facname + ', days : ' + days + ', hours : ' + hour);
}

and in HTML

<select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData(subname, facname, days, hour);">

Check ng-change function passes four arguments. You can directly pass modal value to function and access that value in controller function.

Note : If first dropdown is not selected and set to default value then by changing second dropdown return undefined for subname

Snippet for more details:

 var myApp = angular.module('myApp', []); myApp.controller('tableCtrl', ['$scope', function($scope) { $scope.noOfDays = []; //$scope.subname = ''; //$scope.facname = ''; $scope.days = { '0': "Monday", '1': 'Tuesday', '2': 'Wednesday', '3': 'Thursday', '4': 'Friday' } $scope.hours = [ '9AM :: 10AM', '10AM :: 11AM', '11:15AM :: 12:15PM', '12:15PM :: 01:15PM', '02PM :: 03PM', '03PM :: 04PM', '04PM :: 05PM' ] for (var i = 0; i < 5; i++) { $scope.noOfDays.push($scope.days[i]); } $scope.readData = function(subname, facname, days, hour) { alert('name : ' + subname + ', facname : ' + facname + ', days : ' + days + ', hours : ' + hour); } } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table class="table table-bordered table-striped table-hover" id="dataTable" ng-app="myApp" ng-controller="tableCtrl"> <tr> <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i> <BR>Day <i class="fa fa-long-arrow-down"></i> </td> <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td> </tr> <tbody id="detailsstockid"> <tr ng-repeat="days in noOfDays"> <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td> <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours"> <table style="margin:0px; padding:0px; width:100%"> <tr> <td> <select id="coy" name="coy" class="form-control" ng-model="subname"> <option value="">Select Cource</option> <option value="A">Theory1</option> <option value="B">Theory2</option> <option value="C">Theory3</option> <option value="D">Theory4</option> </select> </td> </tr> <tr> <td> <select id="coy" name="coy" class="form-control" ng-model="facname" ng-change="readData(subname, facname, days, hour);"> <option value="">Select Faculty</option> <option value="A">Faculty1</option> <option value="B">Faculty2</option> <option value="C">Faculty3</option> <option value="D">Faculty4</option> </select> </td> </tr> </table> </td> </tr> </tbody> </table>