Ottenere e passare i dati del modello MVC al controller AngularJS

Question

Sono abbastanza nuovo per AngularJS e sono in perdita qui.

In questo momento il mio programma MVC utilizza Razor per visualizzare tutti i dati nel mio database mdf (cioè: @ Html.DisplayFor (ModelItem => item.LastName)). Tuttavia, voglio andare per lo più angolare. Sto cercando di utilizzare ng-repeat per visualizzare tutti i dati del modello, ma non sono sicuro di come passare i dati del modello al controller Angolare e quindi utilizzarlo. Ho provato a serializzare il modello su JSON nel mio ng-init, ma non penso che lo stia facendo bene (ovviamente).

Ecco il mio codice:

// 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")

io non so esattamente che cosa dovrei ripetere a ottenere il FirstName dal modello serializzato. Mi sento come se avessi tutti i pezzi, ma non sono sicuro di come collegarli.

Answer 1

Se avete la chiave firstName sul vostro oggetto JSON come:

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

Si può fare nel modo seguente.

Sul controller:

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

Sul vista:

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

Answer 2

Grazie a darkstalker_010!

Ciò che mi ha confuso era il modo in cui il mio file di controller Angular interagiva con la vista. Tutto ciò che dovevo fare era semplicemente trattare i miei dati angolari {{}} nel mio file .cshtml come se stessimo tentando di accedere normalmente ai dati del Modello (ad esempio model.AttributeName)

Quindi ecco il codice funzionante aggiornato:

// 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")

Ecco come si presenta sans formattazione: