Почему мой угловой список не появляется?

Question

Я работаю над проектом «Угловой», используя сначала API-интерфейс веб-интерфейса и сущность. У меня есть представление, которое имеет таблицу внизу. При загрузке представления он возвращает базу данных для загрузки списка. Я установил точки останова в разных местах, чтобы убедиться, что я возвращаю нужные данные из базы данных, и я отслежу его обратно в угловой контроллер. В контроллере есть данные, но затем он уходит в эфир. Я могу посмотреть заголовки ответов, и он есть. Я немного растерялся. Я поставил сериал json в WebApiConfig для решения проблемы с верблюдом/Паскалем. Вот мой взгляд код:

<div class=" nav"> 
     <div class="span12"> 
      <h3> Work with Dictionaries </h3> 
      <ul class="navbar-nav"> 
      <li><a ui-sref-active="active" style="margin-right: 25px;" ui-sref="injuriesDict">Injuries Dictionary</a></li> 
      <li><a ui-sref-active="active" ui-sref="excercisesDict">Excercise Dictionary</a></li> 
     </ul> 
     </div> 
     </div> 

<h3>Patient Entry Form</h3> 
<ul class="navbar-nav"> 
    <li><a ui-sref-active="active" ui-sref="patientEntry">Patient Entry</a></li>  
</ul> 

     <div class="container span12"> 
     <div class="row"> 
     <h1>Patient Search</h1> 
     <form class="form-search horizontal-form" method="POST"> 
      <label for="lastName">LastName</label> 
      <input type="text" class="input-medium" style="margin-bottom: 10px;" id="lastName" name="name"> 
      <br> 
      <label for="ssn">SSN</label> 
      <input type="text" class="input-medium" style="margin-left: 40px; margin-bottom: 10px" id="ssn" name="ssn"> 
      <br> 
      <label for="mrn">MRN</label> 
      <input type="text" class="input-medium" style="margin-left: 32px; margin-bottom: 20px;" id="mrn" name="mrn"> 
      <br> 
      <button type="button" class="btn btn-default" ng-click="vm.patientSearch();">Search</button> 
     </form> 
    </div> 
    </div> 

    <div class="container"> 
    <div class="row"> 
     <h2>Patient Results</h2> 
     <div ng-controller=" patientSearch as vm"> 
      <table style="border: 1px;" class="span8"> 
       <tr> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>MRN #</th> 
        <th>SSN</th> 
        <th>Injury Type</th> 
        <th>Injury Date</th> 
       </tr> 
       <tr> 
        <th>{{vm.firstName}}</th> 
        <th>{{vm.lastName}}</th> 
        <th>{{vm.mrn}}</th> 
        <th>{{vm.ssn}}</th> 
        <th>{{vm.injuryType}}</th> 
        <th>{{vm.injuryDate | date}}</th> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

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

(function() { 
    'use strict'; 
    angular.module('app') 
     .controller('patientSearch', ["patientResource", patientSearch]); 


    function patientSearch(patientResouce) { 
     var vm = this; 
     patientResouce.query(function(data) { 
     vm.patients = data; 

    }); 
    } 
}()); 

I just don't see why it is not loading the table, does anybody see anything drastically wrong with my code? 

Answer 1

Вы, вероятно, хотите что-то вроде этого:

 <table style="border: 1px;" class="span8"> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>MRN #</th> 
       <th>SSN</th> 
       <th>Injury Type</th> 
       <th>Injury Date</th> 
      </tr> 
      <tr ng-repeat="patient in patients"> 
       <th>{{patient.firstName}}</th> 
       <th>{{patient.lastName}}</th> 
       <th>{{patient.mrn}}</th> 
       <th>{{patient.ssn}}</th> 
       <th>{{patient.injuryType}}</th> 
       <th>{{patient.injuryDate | date}}</th> 
      </tr> 
     </table> 

То есть предполагается, что вы хотите, чтобы ваш список пациентов в качестве таблицы содержание, одна строка на запись пациента.

Answer 2

Вы должны использовать controllerAs синтаксис (vm.patients):

<tr ng-repeat="patient in vm.patients"> 
       <th>{{patient.firstName}}</th> 
       <th>{{patient.lastName}}</th> 
       <th>{{patient.mrn}}</th> 
       <th>{{patient.ssn}}</th> 
       <th>{{patient.injuryType}}</th> 
       <th>{{patient.injuryDate | date}}</th> 
</tr>