使用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變量中。這是我的笨拙示例。請幫助我解決這個問題。

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>