[英]Data won't load in Angular view
So I'm working through an AngularJS tutorial, so I know this is not the best way to complete these tasks, but this is the step I'm on. 因此,我正在研究AngularJS教程,因此我知道这不是完成这些任务的最佳方法,但这是我要执行的步骤。 I'm trying to load data into a view, but the data doesn't display.
我正在尝试将数据加载到视图中,但是数据不显示。 My ng-view and my ng-route is working properly to get me there, but once I'm on patient.html, I just have my table headers, and no info.
我的ng-view和ng-route可以正常运行,以使我到达那里,但是一旦我进入Patient.html,就只有表格标题,而且没有任何信息。 What am I missing?
我想念什么?
Here is my module 这是我的模块
(function() {
var app = angular.module('cbApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
controller : 'MainCtrl',
templateUrl : 'views/main.html'
})
.when('/patient/:roomId', {
controller : 'PatientCtrl',
templateUrl : 'views/patient.html'
})
.otherwise({ redirectTo : '/' });
});
}());
Here is my controller 这是我的控制器
(function() {
var PatientCtrl = function ($scope, $routeParams) {
var roomId = $routeParams.roomId;
$scope.patient = null;
//create a function that searches the rooms for id
function init() {
var length = $scope.rooms.length;
for (var i = 0; i < length; i++){
if ($scope.rooms[i].name === parseInt(roomId)) {
$scope.patient = $scope.rooms[i].patient;
break;
}
}
}
$scope.rooms = [
{ id : 101, name : "101", patient : { id : 1, last: "Ratcliff", first : "Daniel"} },
{ id : 102, name : "102", patient : { id : 2, last: "Gibson", first : "Mel"} },
{ id : 103, name : "103", patient : { id : 3, last: "Fey", first : "Tina"} }
];
init();
}
//handle DI to avoid minification errors
PatientCtrl.$inject = ['$scope', '$routeParams'];
//define the controller in angular
angular.module('cbApp').controller('PatientCtrl', PatientCtrl);
}());
and my view 和我的看法
<h2>Room Details</h2>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="pt in patient">
<td>{{ pt.first }}</td>
<td>{{ pt.last }}</td>
</tr>
</table>
您非常仔细地将roomId参数转换为一个int,然后将其三等式比较为一个字符串。
Here is a working plunker of your code....with slight modifications: plunker 这里是你的代码的工作plunker ....稍作修改: plunker
angular.module('cbApp', ['ngRoute']).
config(function ($routeProvider) {
//configure your routes
});
(function() {
var PatientCtrl = function ($scope, $routeParams) {
var roomId = $routeParams.roomId || 101;
$scope.patients = [];
//create a function that searches the rooms for id
function init() {
var length = $scope.rooms.length;
for (var i = 0; i < length; i++){
if (parseInt($scope.rooms[i].name) === parseInt(roomId)) {
$scope.patients.push($scope.rooms[i].patient);
break;
}
}
}
$scope.rooms = [
{ id : 101, name : "101", patient : { id : 1, last: "Ratcliff", first : "Daniel"} },
{ id : 102, name : "102", patient : { id : 2, last: "Gibson", first : "Mel"} },
{ id : 103, name : "103", patient : { id : 3, last: "Fey", first : "Tina"} }
];
init();
}
//define the controller in angular
angular.module('cbApp').controller('PatientCtrl', ['$scope', '$routeParams', PatientCtrl]);
}());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.