使用ng-repeat AngularJs显示数据

Question

我有这种类型的json对象：

[
    {
        "contactsCount": 2,
        "id": 1,
        "userKey": "$2a$10$3jCL8.rJV9/KS11MtrB4r.0uE4Fu/rGwEk.ko0HTkzFNiKXhh1.X.",
        "groupname": "Angular",
        "createdAt": "2018-01-15T07:21:42.000Z",
        "updatedAt": "2018-01-15T07:21:42.000Z",
        "contactgroups": [
            {
                "id": 1,
                "contact": {
                    "id": 1,
                    "gsm": "111111111",
                    "firstname": "Mohamed",
                    "lastname": "Sameer"
                }
            },
            {
                "id": 3,
                "contact": {
                    "id": 3,
                    "gsm": "222222222",
                    "firstname": "Rizwan",
                    "lastname": "Riz"
                }
            }
        ]
    }
]

我在$ scope.modalData中得到这个。

我必须在表格中显示我的gsm，名字和姓氏：

我的翡翠代码：

table.table
tr
 th GSM
 th First Name
 th Last Name

tr(ng-repeat='testData in modalData.contactgroups[0]')
 td {{testData.gsm}} 
 td {{testData.firstname}}
 td {{testData.lastname}}

有人帮助我，我没有数据，有人可以解释一下该怎么做吗？

当用户单击另一个表中的“编辑”按钮时，我得到以下响应：

$scope.modalData = {};
    $scope.setModal = function (data) {
        $scope.modalData = data;
        console.log($scope.modalData);
    }




Jade:
    td
      a(data-toggle='modal',ng-click='setModal(groups[$index])' ) Groups

Answer 1

您必须从ng-repeat删除[0] ，然后才能获得实际的数组。
由于您在contact对象下具有这些值，因此必须使用对象和属性名称进行填充。 喜欢，

tr(ng-repeat='testData in modalData.contactgroups')
 td {{testData.contact.gsm}} 
 td {{testData.contact.firstname}}
 td {{testData.contact.lastname}}

Answer 2

 <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <title>AngularJS Example</title> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> <script> var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.items = [ { "contactsCount": 2, "id": 1, "userKey": "$2a$10$3jCL8.rJV9/KS11MtrB4r.0uE4Fu/rGwEk.ko0HTkzFNiKXhh1.X.", "groupname": "Angular", "createdAt": "2018-01-15T07:21:42.000Z", "updatedAt": "2018-01-15T07:21:42.000Z", "contactgroups": [ { "id": 1, "contact": { "id": 1, "gsm": "111111111", "firstname": "Mohamed", "lastname": "Sameer" } }, { "id": 3, "contact": { "id": 3, "gsm": "222222222", "firstname": "Rizwan", "lastname": "Riz" } } ] } ] }); </script> </head> <body ng-controller="MainCtrl"> <table> <tr ng-repeat="item in items[0].contactgroups"> <td ng-repeat="i in item">{{i.gsm}}</td> <td ng-repeat="i in item">{{i.firstname}}</td> <td ng-repeat="i in item">{{i.lastname}}</td> </tr> </table> </body> </html>

使用ng-repeat AngularJs显示数据

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-01-19 12:34:53

解决方案2
0 2018-01-19 12:46:19

使用ng-repeat AngularJs显示数据

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-01-19 12:34:53

解决方案2 0 2018-01-19 12:46:19

解决方案1
1 已采纳 2018-01-19 12:34:53

解决方案2
0 2018-01-19 12:46:19