AnthonyMascia AnthonyMascia - 2 months ago 35x
AngularJS Question

Getting and passing MVC Model data to AngularJS controller

Hey guys so I'm pretty new to AngularJS and I'm at a loss here.

Right now my MVC program uses Razor to display all the data in my .mdf database (i.e: @Html.DisplayFor(modelItem => item.LastName) ). However, I want to go mostly Angular. I am trying to use ng-repeat to display all of the Model data, but I am not sure how to pass that Model data to the Angular controller and then use it. I have tried serializing the Model to JSON in my ng-init, but I don't think I'm doing it right (obviously).

Here is my 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))">
<tr ng-repeat= <!--THIS IS WHERE I'M STUCK -->

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

I'm not sure exactly what I should be repeating on to get the FirstName from the serialized Model. I feel like I have all the pieces, but just unsure how to connect them.

Any help would be much appreciated. Thank you


If you have the key firstName on your Json object like:

    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},

You can do it in the following way.

On your controller:

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

On your view:

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