web-dev-qa-db-ja.com

MVCモデルデータを取得してAngularJSコントローラーに渡す

私はAngularJSにかなり慣れていないので、ここで迷っています。

現在、私のMVCプログラムはRazorを使用して、.mdfデータベース内のすべてのデータを表示します（つまり：@ Html.DisplayFor（modelItem => item.LastName））。しかし、私は主にAngularに行きたいです。 ng-repeatを使用してすべてのモデルデータを表示しようとしていますが、そのモデルデータをAngularコントローラーに渡し、それを使用する方法がわかりません。 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")

シリアル化されたモデルからFirstNameを取得するために何を繰り返す必要があるのか​​正確にはわかりません。私はすべてのピースを手に入れたように感じますが、それらをどのように接続するのか分かりません。

javascriptasp.net-mvcangularjsrazorasp.net-mvc-5
21
Daath

Jsonオブジェクトに次のようなキーfirstNameがある場合：

{
 "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>
17
darkstalker_010

Darkstalker_010に感謝します！

私が混乱したのは、Angularコントローラーファイルがビューとどのように相互作用するかでした。私がしなければならなかったのは、単に.cshtmlファイル内のangular {{}}データを、通常のモデルデータ（つまり、model.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")

書式設定なしのように見えます：

capture

16
Daath