8

いくつかのAngularJSを学ぶためのベースとして使用している簡単な概念実証があります。このコードは、次のように HTML テーブルに JSON データを表示します。

HTML:

<div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
        <p>Click <a ng-click="loadPeople()">here</a> to load data.</p>
        <table>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr ng-repeat="person in people">
                <td>{{person.id}}</td>
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
            </tr>
        </table>
    </div>
</div>

JS:

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
    {
    id: 1,
    firstName: "Peter",
    lastName: "Jhons"},
{
    id: 2,
    firstName: "David",
    lastName: "Bowie"}
]));


var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

}

フィドルはこちら: http://jsfiddle.net/TUJ9D/

これはうまく機能します。リンクをクリックすると、「loadPeople」が呼び出され、json がテーブルに取り込まれます。ただし、私がやりたいのは、ページの読み込み時にこれをバインドすることです。そのため、ユーザーはリンクを手動でクリックしてテーブルのデータを表示する必要はありません。

これを行うための最良の方法は何だろうと思いましたか？本能は、ページの読み込み時にjqueryを使用して関数を呼び出すように指示していますが、それが良いアプローチであるかどうか、またはAngular自体がより良い方法でこれを実行できるかどうかはわかりません。

ありがとうございます。

4

2 に答える 2

6

コントローラーで load 関数を呼び出すだけです。

function PeopleCtrl($scope, $http) {

    $scope.people = [];

    $scope.loadPeople = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.people = data;
        });

    };

    $scope.loadPeople();
}

http://jsfiddle.net/TUJ9D/1/

于 2013-09-12T16:36:22.950 に答える