Question

我是角度编程的新手，

我想将从webservice获取的json数据绑定到html表，

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>LIST OF USER Sample</title>
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/module.js"></script>
    <script>

        function PeopleCtrl($scope, $http) {

            $scope.people = [];

            $scope.loadPeople = function () {

                var httpRequest = $http
                    ({
                        method: 'GET',
                        url: 'http://10.17.44.236:9090/MobileBootcamp.svc/getalluseravailability'

                    })
                    .success(function (data, status) {
                        debugger;
                        $scope.people = data;

                    });


            };
            $scope.loadPeople();
        }

    </script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="PeopleCtrl" ng-init="loadPeople()">
            <table>
                <tr>
                    <th>Id</th>
                    <th>Availibility</th>
                </tr>
                <tr ng-repeat="x in people.Datalist[0]">
                    <td>{{x.UserID}}</td>
                    <td>{{x.Availability}}</td>
                </tr>
                <tr>
                    <td>{{people.DataList[0].UserID}}</td>
                    <td>{{people.DataList[0].Availability}}</td>
                </tr>
                <tr>
                    <td>{{people.DataList[1].UserID}}</td>
                    <td>{{people.DataList[1].Availability}}</td>
                </tr>

            </table>
        </div>
    </div>


    <script src="cordova.js"></script>
    <script src="js/platformOverrides.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

这是来自网络服务的json

{"Status":true,"Message":"","Data":null,"DataList":[{"ChangeBy":"Admin","ChangeDate":"\/Date(1439437580137+0700)\/","ChangeNo":2,"CreateBy":"Admin","CreateDate":"\/Date(1439437580137+0700)\/","Availability":true,"LastCheckIn":"\/Date(1439437645420+0700)\/","UserID":"Admin"},{"ChangeBy":"ITK_ABD","ChangeDate":"\/Date(1439398800000+0700)\/","ChangeNo":1,"CreateBy":"ITK_ABD","CreateDate":"\/Date(1439398800000+0700)\/","Availability":false,"LastCheckIn":"\/Date(1439398800000+0700)\/","UserID":"ITK_ABD"}]}

我已经尝试了“ng-repeat”，但它没有用，

数据类似于数据 - ＆gt;的DataList - ＆GT; [0] - ＆gt;用户ID，可用性，等等...

事先提前

Answer 1

您不需要[0]。您的ng-repeat可以获取列表中的所有元素。你只需要给你的清单，而不是索引和角度就可以完成这项工作。

<tr ng-repeat="x in people.DataList">

Answer 2

执行以下操作 -

<tr ng-repeat="x in people.Datalist">
    <td>{{x.UserID}}</td>
    <td>{{x.Availability}}</td>
</tr>

由于你在Datalist中有对象数组，你应该迭代DataList而不是DataList [0]

Answer 3

无需 [0] 。我们不想遍历您的第一个对象，所以只需 people.DataList 即可完成工作。它将遍历该数组中的所有对象。

           <tr ng-repeat="x in people.DataList">
                <td>{{x.UserID}}</td>
                <td>{{x.Availability}}</td>
            </tr>

Answer 4

您正在尝试重复对象：

<tr ng-repeat="x in people.Datalist[0]">

您只能在Array数据类型上重复。所以你必须这样做：

<tr ng-repeat="x in people.Datalist">

将Json数据绑定到HTML TABLE

4 个答案: