Данные не загружаются в режиме Angular view

Question

Итак, я работаю над учебником AngularJS, поэтому я знаю, что это не лучший способ выполнить эти задачи, но это тот шаг, на котором я нахожусь. Я пытаюсь загрузить данные в представление, но данные не отображаются. Мой ng-view и мой ng-route работают правильно, чтобы получить меня там, но как только я нахожусь на patient.html, у меня просто есть заголовки таблиц и нет информации. Что мне не хватает?

Вот мой модуль

(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 : '/' }); 
    }); 

}()); 

Вот мой контроллер

(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); 
}()); 

и мой взгляд

<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> 

Answer 1

Я закончил ваш плунжер для вас.

Но не уверен, что это то, чего вы хотите достичь.

здесь вы можете увидеть:

plunker

<tr > 
     <td>{{ patient.first }}</td> 
     <td>{{ patient.last }}</td> 
</tr> 

плюс некоторые ссылки и путь

Answer 2

Вы очень тщательно преобразовал параметр RoomID к междунар, а затем тройной - сравните его со строкой.

Answer 3

Вот рабочий 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]); 
}());