[英]Not getting any value in controller page using angular.js
我没有使用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变量中。这是我的笨拙示例。请帮助我解决这个问题。
您使用了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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.