使用 ng-repeat AngularJs 显示数据答案

【问题标题】：Display data using ng-repeat AngularJs使用 ng-repeat AngularJs 显示数据
【发布时间】：2018-06-28 16:44:02
【问题描述】：

我有这种类型的 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

【问题讨论】：

迭代contact对象即testData in modalData.contactgroups[0].contact
我想说：tr(ng-repeat='testData in modalData[0].contactgroups') td {{testData.contact.gsm}} ...
查看我更新的问题:)
这是什么意思：“setModal(groups[$index])”？ “gropus[$index]”从何而来？
等待更新

标签： javascript arrays angularjs json object

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：