如何在ng-repeat angularjs中使用多重响应?

时间:2017-12-07 10:15:42

标签: javascript angularjs json node.js pug

$http({
                method: 'GET',
                url: '/api/getnewgroup'
            })
            .then(function (response) {
                $scope.groups = response.data;
            }, function (response) {
                window.location.href = '/';
            });

        $http({
            method: 'GET',
            url: '/api/getnewgroupforprofsms'
        })
        .then(function (response) {
            $scope.profsmsgroups.groups = response.data;
        }, function (response) {
            window.location.href = '/';
        });

我在$ scope.groups和$ scope.profsmsgroups.groups两个多个范围内得到了两个不同的响应。

tr(ng-repeat='group in profsmsgroups.groups')
   td
   input(type = 'checkbox', ng-model='group.select')
   td {{group.groupname}}
   td {{group.contactsCount}}

我在$ scope.profsmsgroups.groups范围内有groupname,因此td {{group.groupname}}正确显示

但我在$ scope.groups中有contactsCount

那么如何使用多重ng-repeat响应?

我的$ scope.profsms.groups json:

[
    {
        "id": 7,
        "groupname": "Angular",
        "createdAt": "2017-12-07T10:49:31.000Z",
        "updatedAt": "2017-12-07T10:49:31.000Z",
        "contactgroups": [
            {
                "id": 7,
                "contact": {
                    "gsm": "4779306474"
                }
            }
        ]
    },
    {
        "id": 3,
        "groupname": "Vue",
        "createdAt": "2017-12-05T09:36:15.000Z",
        "updatedAt": "2017-12-05T09:36:15.000Z",
        "contactgroups": []
    },
    {
        "id": 5,
        "groupname": "React",
        "createdAt": "2017-12-05T09:36:29.000Z",
        "updatedAt": "2017-12-07T10:46:28.000Z",
        "contactgroups": []
    },
    {
        "id": 6,
        "groupname": "Node",
        "createdAt": "2017-12-06T09:47:24.000Z",
        "updatedAt": "2017-12-07T10:46:35.000Z",
        "contactgroups": []
    }
]

我的$ scope.groups回复

[
    {
        "id": 3,
        "groupname": "Vue",
        "contactsCount": 0,
        "contactgroups": []
    },
    {
        "id": 5,
        "groupname": "React",
        "contactsCount": 0,
        "contactgroups": []
    },
    {
        "id": 6,
        "groupname": "Node",
        "contactsCount": 0,
        "contactgroups": []
    },
    {
        "id": 7,
        "groupname": "Angular",
        "contactsCount": 1,
        "contactgroups": [
            {
                "id": 7
            }
        ]
    }
]

1 个答案:

答案 0 :(得分:1)

我假设你在两者之间有评论ID,而不是像以下那样: -



var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.groups=[
{
    "id": 3,
    "groupname": "Vue",
    "contactsCount": 0,
    "contactgroups": []
},
{
    "id": 5,
    "groupname": "React",
    "contactsCount": 0,
    "contactgroups": []
},
{
    "id": 6,
    "groupname": "Node",
    "contactsCount": 0,
    "contactgroups": []
},
{
    "id": 7,
    "groupname": "Angular",
    "contactsCount": 1,
    "contactgroups": [
        {
            "id": 7
        }
    ]
}
];
$scope.pGroups=[
{
    "id": 7,
    "groupname": "Angular",
    "createdAt": "2017-12-07T10:49:31.000Z",
    "updatedAt": "2017-12-07T10:49:31.000Z",
    "contactgroups": [
        {
            "id": 7,
            "contact": {
                "gsm": "4779306474"
            }
        }
    ]
},
{
    "id": 3,
    "groupname": "Vue",
    "createdAt": "2017-12-05T09:36:15.000Z",
    "updatedAt": "2017-12-05T09:36:15.000Z",
    "contactgroups": []
},
{
    "id": 5,
    "groupname": "React",
    "createdAt": "2017-12-05T09:36:29.000Z",
    "updatedAt": "2017-12-07T10:46:28.000Z",
    "contactgroups": []
},
{
    "id": 6,
    "groupname": "Node",
    "createdAt": "2017-12-06T09:47:24.000Z",
    "updatedAt": "2017-12-07T10:46:35.000Z",
    "contactgroups": []
}
];
$scope.getContactCount=function(group){
var match=$scope.groups.find(function(d){return d.id==group.id})
if(match){
return match.contactsCount
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table  style="width:100%">
<tr>
<th>name</th>
  <th>count</th>
</tr>
<tr ng-repeat="g in pGroups">
  <td style="text-align: center;">{{g.groupname}}</td>
  <td style="text-align: center;">{{getContactCount(g)}}</td>
</tr>
</table>
</div>
&#13;
&#13;
&#13;