Модель AngularJS MVC Pass для просмотра. Как заполнить угловой стол

Question

Я новичок на angularjs. Я прошел модель от контроллера к представлению с помощью следующей строки

@using Forloop.HtmlHelpers 
@model Lga.Cms.Core.Dtos.ContentListDto 

В моей угловой таблице первых нескольких строк, у меня есть следующие

<div id="productListing"> 
       <table class="table-responsive"> 
        <thead></thead> 
        <tbody> 
         <tr ng-repeat="product in productlist"> 

из декларации @model, как я назначен коллекцию в Model to productlist, чтобы она содержала массив DTO? До сих пор я могу видеть что-либо в списке товаров

Спасибо за любую помощь.

Answer 1

Вам необходимо преобразовать вашу модель в объект javascript и передать ее вашему угловому контроллеру. Вы можете использовать метод JsonConvert.SerializeObject() для этого.

На ваш взгляд, добавьте этот код.

@section Scripts{ 
    <script src="~/Scripts/YourAngularController.js"></script>  
    <script> 
    var m = angular.module("app") 
     .value("pageModel",@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))); 

    </script>  
} 

А в вашем угловой контроллер, который находится в файле YourAngularController.js,

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

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

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

А на ваш взгляд, вы можете цикл через productList коллекции.

<div ng-app="app" ng-controller="ctrl as vm"> 
    <div id="productListing"> 
    <table class="table-responsive"> 
      <tr ng-repeat="product in vm.productlist"> 
       <td>{{product.Name}}</td> 
      </tr> 
    </table> 
    </div> 
</div> 

Answer 2

Можно присвоить C# VM к угловой области контроллера с помощью нг-инициализации и сериализаций вашего C# VM как Json использования JsonConvert.SerializeObject

<div ng-init="productlist=@JsonConvert.SerializeObject(this.Model)"></div> 
<div id="productListing" ng-controller="your controller"> 
    <table class="table-responsive"> 
     <thead></thead> 
     <tbody> 
      <tr ng-repeat="product in productlist"> 
       <td>{{product.Name}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>