为什么我的角度列表不显示？

Question

I am working on an Angular project using, Web API and entity framework code first. I have a view that has a table on the bottom. When the view is loaded it calls back to the database to load the list. I have set break points at various locations to make sure that I am getting back the right data from the Data base and I trace it back into the angular controller. In the controller the data is there but it then goes off into the ether. I can look at the response headers and it is there. I am kind of at a loss. I put in some json serialization in WebApiConfig To deal with the camel/Pascal case issue. Here is my view code:

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

Here is my controller code

(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

You probably want something like this:

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

That is assuming you want your patient list as table contents, one row per patient record.

Answer 2

You need to use the controllerAs syntax (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>