沒有在控制器頁面中使用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事件正在執行的錯誤是coming.I需要時用戶將選擇任何課程數據和教師姓名，它將存儲在日期和時間的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爲​​

摘錄更多細節爲默認值，則：

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>