[英]Display data using ng-repeat AngularJs
I have this type of json object: 我有这种类型的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"
}
}
]
}
]
I am getting this in $scope.modalData . 我在$ scope.modalData中得到这个。
I have to show my gsm, first name and last name in table: 我必须在表格中显示我的gsm,名字和姓氏:
My jade code: 我的翡翠代码:
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}}
anyone help me, i am not getting data, can anyone explain me how to do that? 有人帮助我,我没有数据,有人可以解释一下该怎么做吗?
I am getting this response when user click edit button from another table: 当用户单击另一个表中的“编辑”按钮时,我得到以下响应:
$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
You have to remove [0]
from your ng-repeat
, then you will get actual array. 您必须从ng-repeat
删除[0]
,然后才能获得实际的数组。
Since you have those values under contact
object, you have to populate using object and property name. 由于您在contact
对象下具有这些值,因此必须使用对象和属性名称进行填充。 Like, 喜欢,
tr(ng-repeat='testData in modalData.contactgroups')
td {{testData.contact.gsm}}
td {{testData.contact.firstname}}
td {{testData.contact.lastname}}
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.