How do I identify my model object in my view using angular module?

Question

Currently, my viewModel is passed from my controller to my view and it is populated list. I Can reference my Model in my view currently like Model.

However, if I wanted to do something like this:

<table style="margin-top:20px" cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        <tr ng-show="users != null" ng-repeat="user in users">
            <td>{{user.FirstName}}</td>
            <td>{{user.LastName}}</td>
        </tr>

    </table>

users is not defined or recognized when I debug my view although "Model" is and it has the correct values I"m looking for. I'm familiar with razor syntax and getting the model or checking the model through Razor but what if I wanted to do a foreach loop above but with ng-repeat. How do I make sure I have the correct Model reference from my controller?

where Users is the model I'm getting the data from that's being persisted.

You can't use your Model properties with angular, as these are rendered server side and angular is rendered client side. — Bjørn Sørensen, Dec 21 '15 at 07:57
How do I pass my model data from server to client? How can I make Angular aware of my model? — Kala J, Dec 21 '15 at 11:52
[See this SO](http://stackoverflow.com/questions/21391402/access-model-in-javascript-asp-net-mvc-razor?answertab=votes#tab-top) — Bjørn Sørensen, Dec 21 '15 at 12:00
Yes. But now your question is how to render yer server side model into something javasript (AngularJS) can iterate on. Therefore you have to render the model first into an array and fromt here iterate with ngRepeat. — Bjørn Sørensen, Dec 21 '15 at 12:17

score 1 · Accepted Answer · answered Dec 21 '15 at 14:28

Razor is executed on the server and angular is on client side. So you cannot simply acccess your server side model in your client side code.

What you can do is, in your razor view, serialize the model and create a json representation of the data and inject this object to your angular controller using the value provider.

So in your razor view,

@model YourViewModel
<div ng-app="app" ng-controller="ctrl as vm">
    <table style="margin-top:20px" cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        <tr ng-show="vm.users != null" ng-repeat="user in vm.users">
            <td>{{user.Name}}</td>
            <td>{{user.Name}}</td>
        </tr>    
    </table>
</div>
@section Scripts{   
  <script src="~/Scripts/YourAngularController.js"></script>    
  <script>
    var m = angular.module("app")
         .value("pageModel",@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));

  </script>    
}

And in your angular controller which is in YourAngularController.js file,

var app = angular.module("app", []);
var ctrl = function (pageModel) {

    var vm = this;
    vm.users = pageModel; //assuming pageModel is a list of users

};
app.controller("ctrl", ctrl);

How do I identify my model object in my view using angular module?

1 Answers1