MVC-Modelldaten erhalten und an AngularJS-Controller übergeben

Question

Ich bin ziemlich neu bei AngularJS und bin hier ratlos.

Im Moment verwendet mein MVC-Programm Razor, um alle Daten in meiner .mdf-Datenbank anzuzeigen (d. H. @ Html.DisplayFor (ModelItem => item.LastName)). Allerdings möchte ich meist schräg gehen. Ich versuche, ng-repeat zu verwenden, um alle Model-Daten anzuzeigen, aber ich bin mir nicht sicher, wie diese Model-Daten an den Angular-Controller übergeben und dann verwendet werden. Ich habe versucht, das Modell zu JSON in meinem ng-init zu serialisieren, aber ich glaube nicht, dass ich es richtig mache (offensichtlich).

Hier ist mein Code:

// controller-test.js 
 

 
var myApp = angular.module('myModule', []); 
 

 
myApp.controller('myController', function ($scope) { 
 
    $scope.init = function (firstname) { 
 
     $scope.firstname = firstname; 
 
    } 
 
});

<!-- Index.cshtml --> 
 

 
@model IEnumerable<Test.Models.Employee> 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<div ng-app="myModule"> 
 
    <div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"> 
 
     <table> 
 
      <tr ng-repeat= <!--THIS IS WHERE I'M STUCK --> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<script src="~/Scripts/angular.min.js"></script> 
 
<script src="~/Scripts/controller-test.js"></script> 
 
@Scripts.Render("~/Scripts/angular.js")

mir genau bin nicht sicher, was soll ich den First aus dem serialisierten Modell wiederholen zu bekommen. Ich habe das Gefühl, dass ich alle Teile habe, aber ich bin mir nicht sicher, wie ich sie verbinden soll.

Answer 1

Wenn Sie den Schlüssel firstName auf Ihrem Json Objekt haben wie:

{ 
"employees":[ 
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter","lastName":"Jones"} 
    ] 
} 

Sie können es in der folgenden Art und Weise tun.

auf dem Controller:

myApp.controller('myController', function ($scope) { 
    $scope.init = function (employees) { 
     $scope.employees = employees; 
    } 
}); 

Auf Ihrer Ansicht:

<table> 
    <tr ng-repeat= "employee in employees"> 
     <td>{{ employee.firstName }}<td> 
    </tr> 
</table> 

Answer 2

Vielen Dank an darkstalker_010!

Was ich verwirrt war, war, wie meine Angular Controller-Datei mit der Ansicht interagiert hat. Alles, was ich tun musste, war einfach meine eckigen {{}} Daten in meiner .cshtml Datei zu behandeln, als ob ich normal auf die Model Daten zugreifen wollte (zB model.AttributeName)

Also hier ist der aktualisierte, funktionierende Code:

// controller-test.js 
 

 
var myApp = angular.module('myModule', []); 
 

 
myApp.controller('myController', function ($scope) { 
 
    $scope.init = function (employees) { 
 
     $scope.employees= employees; 
 
    } 
 
});

<!-- Index.cshtml --> 
 

 
@model IEnumerable<Test.Models.Employee> 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<div ng-app="myModule"> 
 
<div ng-controller="myController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"> 
 
      <table> 
 
       <tr> 
 
        <th>First Name</th> 
 
        <th>Last Name</th> 
 
        <th>Title</th> 
 
        <th>Department</th> 
 
        <th>Email</th> 
 
       </tr> 
 
       <tr ng-repeat="e in employees"> 
 
        <td>{{e.FirstName}}</td> 
 
        <td>{{e.LastName}}</td> 
 
        <td>{{e.Title}}</td> 
 
        <td>{{e.Department.DepartmentName}}</td> 
 
        <td>{{e.Email}}</td> 
 
       </tr> 
 
      </table> 
 
</div> 
 
</div> 
 

 

 
<script src="~/Scripts/angular.min.js"></script> 
 
<script src="~/Scripts/controller-test.js"></script> 
 
@Scripts.Render("~/Scripts/angular.js")

Hier ist, wie es aussieht sans Formatierung: