2015-01-28 1 views
1

저는 AngularJS 자습서를 진행 중이므로이 작업을 완료하는 가장 좋은 방법은 아니라는 것을 알고 있습니다. 그러나 이것이 제가 수행해야 할 단계입니다. 데이터를 뷰에로드하려고하는데 데이터가 표시되지 않습니다. 내 ng-view와 ng-route가 제대로 작동하고 있지만, 일단 patient.html을 방문하면 테이블 헤더와 정보 만 있습니다. 내가 뭘 놓치고 있니? 여기 데이터가 각도보기로로드되지 않습니다

여기 내 컨트롤러

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

그리고 당신은 매우 신중를 int로 roomId 매개 변수를 변환

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

콘솔에 오류가 있습니까? –

+0

for 루프 뒤에 console.log ($ scope.patient)를 넣으면 콘솔에 올바른 결과가 표시됩니까? – Cognitronic

+0

@ NishamMahsin nope. 오류 없음. – theFish

답변

1

나는 당신을 위해 플 런커를 완성했습니다.

하지만 이것이 실현하기를 원하는지 확실하지 않습니다. 여기

당신은 그것을 볼 수 있습니다

plunker

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

플러스 몇 가지 링크 및 경로를

다음
+0

반복 할 것이없는 무언가를 반복하려고했기 때문에 그랬습니까? – theFish

+0

plunker의 일부가 정확하지 않았습니다. if ($ scope .rooms [i] .name == roomId) {$ scope.patient = $ scope.rooms [i] .patient; break;}는 $ routeParams에 해당하는 환자를 제공합니다. – micha

1

내보기 다음 트리플 내 모듈

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

}()); 

입니다 -equal은 문자열과 비교합니다.

0

이 코드의 작업 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]); 
}()); 
관련 문제