Getting and passing MVC Model data to AngularJS controller

Question

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

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.

how your response json looks like?

Pankaj Parkar
– Pankaj Parkar

2015-06-08 17:32:42 +00:00
Commented Jun 8, 2015 at 17:32 — Pankaj Parkar
– Pankaj Parkar, Commented Jun 8, 2015 at 17:32

Juan Carlos Oropeza · Accepted Answer · 2016-08-23 02:24:25Z

18

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

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

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:

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

edited Aug 23, 2016 at 2:24

Juan Carlos Oropeza

48.4k14 gold badges87 silver badges128 bronze badges

answered Jun 8, 2015 at 18:00

darkstalker_010

4433 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daath Over a year ago

Yes! That did it! I knew I was close, I was just over-complicating it in my head. Thank you SO much, you just saved me so much frustration. I completely get it now.

MBen Over a year ago

My data is passed from a a server control, and I use Razor, there is the employees data defined in this example?

Jason Sturges · Accepted Answer · 2017-05-05 03:34:01Z

Thank you to darkstalker_010!

What I was confused was with how my Angular controller file interacted with the view. All I had to do was simply treat my angular {{ }} data in my .cshtml file as if I were trying to access the Model data normally (i.e. model.AttributeName)

So here is the updated, working 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")

Here is what it looks like sans formatting:

Collectives™ on Stack Overflow

Getting and passing MVC Model data to AngularJS controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related