在页面加载时使用AngularJS将json绑定到HTML表

我有一个简单的概念验证,我用它来学习一些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拉入表中.但是,我想要做的是在页面加载时绑定它,这样用户就不必手动点击链接来查看表格中的数据.

我想知道最好的办法是什么？ Instinct告诉我在页面加载时使用jquery调用该函数,但后来我不知道这是一个好方法还是Angular能否以更好的方式做到这一点.

谢谢大家.

只需调用控制器中的加载功能即可.

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

    };

    $scope.loadPeople();
}

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

在页面加载时使用AngularJS将json绑定到HTML表

猜你在找的Angularjs相关文章