MVC 모델 데이터 가져오기 및 각도 전달JS컨트롤러

MVC 모델 데이터 가져오기 및 각도 전달JS컨트롤러

앵귤러는 처음입니다.JS와 저는 여기서 막막합니다.

현재 MVC 프로그램은 Razor를 사용하여 .mdf 데이터베이스의 모든 데이터를 표시합니다(즉, @Html).DisplayFor(모델아이템 => 항목).성(Last Name))).하지만 저는 앵글 위주로 가고 싶습니다.ng-repeat을 사용하여 모든 모델 데이터를 표시하려고 하는데 해당 모델 데이터를 Angular controller에 전달한 후 사용하는 방법을 잘 모르겠습니다.제 ng-init에서 모델을 JSON에 직렬화하려고 했지만, 제가 제대로 하고 있지 않다고 생각합니다(분명히).

여기 내 코드가 있습니다.

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

직렬화된 모델에서 First Name을 얻으려면 정확히 무엇을 반복해야 하는지 잘 모르겠습니다.모든 조각을 다 가지고 있는 것 같지만, 어떻게 연결해야 할지 막막합니다.

열쇠를 가지고 계시다면firstName당신의 Json 객체에 대해 다음과 같이 말입니다.

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

다음과 같은 방법으로 할 수 있습니다.

컨트롤러에서:

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

보기에 따라:

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

다크스토커_010 감사합니다!

내 Angular 컨트롤러 파일이 보기와 어떻게 상호 작용하는지에 대해 혼란스러웠습니다.제가 해야 할 일은 .cshtml 파일에 있는 각 {{}}개의 데이터를 마치 모델 데이터(즉, 모델)에 정상적으로 액세스하려는 것처럼 처리하는 것이었습니다.AttributeName)

다음은 업데이트된 작동 코드입니다.

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

산스 포맷처럼 보이는 것은 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/30715492/getting-and-passing-mvc-model-data-to-angularjs-controller