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

Question

我没有从使用angular.js的控制器文件中的下拉列表中获取任何值。这很容易抛出以下错误。

$scope.subname is undefined

我正在解释下面的代码。

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

当ng-change事件正在执行时，错误即将来临。当用户选择任何课程数据和教师姓名时，我需要它，它将存储在json变量中，包含日期和时间。这是我的plunker例如。请帮我解决这个问题。

Answer 1

您使用了ng-model="facname"和ng-model="subname"但是为了获得价值，您已经使用了

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

这不起作用，因为$scope.subname 需要在控制器中定义。但是你可以将它传递给方法并获得像

这样的控制器功能

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

和HTML

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

检查ng-change函数传递四个参数。您可以直接将modal值传递给函数并在控制器函数中访问该值。

注意：如果未选择第一个下拉列表并设置为默认值，则更改undefined的第二个下拉列表返回subname

摘录详情：

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>