angularjs - 如何在循环后显示所有多数据数组并使用 ng-repeat 显示所有数据?

标签 angularjs node.js

嘿,我的代码遇到了一些问题, 首先,我想在找到这样的数据后告诉我的代码:
1.api查找

var Group        = require('../models/group/GroupAlm.js');
var fs          = require('fs');
module.exports = function(groupalm) {
groupalm.get('/groupalm/:nim', function(req, res){
  var getOne = req.params.nim;
    Group.find({ nim:getOne}).select('postings').exec(function(err, grooup){
      if (err){
          res.json({ success: false, message: 'Not Found'});
      }else{
         res.json({ success:true, grooup:grooup});
      }
  })
});return groupalm;};

以及2.调用获取api

var appFactory=angular.module('app.factory',[]);
   appFactory.factory('AllGrp',function($http){
      var allNotFactory = {};
          allNotFactory.getAllAlmGrp = function(nim) {
              return $http.get('/mod_mygroup/groupalm/' + nim);
          };
return allNotFactory;
});

3是我的 Controller

app.controller('appCtrl', ['$scope','AllGrp', function ($scope,AllGrp) {

function getGroupByPKNIMalm() {  
    var nim = 11037050017;
    AllGrp.getAllAlmGrp(nim).then(function(cek){
      if (cek.data.success){
          for (var i = 0; i < cek.data.grooup.length; i++){
              $scope.grp = cek.data.grooup[i].postings;
              console.log('data',$scope.grp);                                      
            }
     }else{ console.log('err');}
   });
}; getGroupByPKNIMalm();

}]);

更新文本 HTML 此 ng-repeat 用于显示数据

<li class="list-group" role="presentation" ng-repeat="groups in grp | orderBy:'created_at':true ">
            <div data-role="container">
              <div data-role="content">
                <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                  <div class="media">
                    <div class="media-left padding-right-10">
                      <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                    </div>
                    <div class="media-body">
                      <h6 class="media-heading">{{groups.nim}}</h6>
                      <h6 class="media-meta">{{groups.post}}</h6>
                    </div>
                  </div>
                </a>

/END 更新文本 HTML/

步骤1-3中的关键是成功从api获取数据,这是我在get/Find之后的数据:

{
"success": true,
"grooup": [
  {
     "_id": "59eeb992a6ddc00f1037c1cf",
     "postings": [
          {
              "nim": 1137050017,
              "nama": "ADRIYANA PUTRA PRATAMA",
              "post": "hay salam kenal",
              "created_at": "2017-10-24T03:55:17.004Z"
          },
               {
                 "nim": 1111111,
                 "nama": "Fakih Nuzli",
                 "post": "hay salam kenal",
                 "created_at": "2017-10-24T04:01:14.954Z"
               }
      ]
 },
 {
   "_id": "59ef26cc0cfb2618d047cc6f",
   "postings": [
       {
           "nim": 1137050017,
           "nama": "ADRIYANA PUTRA PRATAMA",
           "post": "selata datang",
           "created_at": "2017-10-24T21:27:06.091Z"
       },
            {
               "nim": 1111111,
               "nama": "Fakih Nuzli",
               "post": "ya thanx",
               "created_at": "2017-10-24T21:27:29.384Z"
            },
       ]
 },
 {
     "_id": "59e53fcd1e85242ea417832e",
     "postings": [
          {
              "nim": 1111111,
              "nama": "Fakih Nuzli",
              "post": "hay",
              "created_at": "2017-10-24T11:19:44.318Z"
          }
      ],
}
]}

问题出在步骤3中,我在 Controller 中循环数据,用于显示所有数据postings,再次回顾步骤3,有一个循环数据的代码,如下代码循环

for (var i = 0; i < cek.data.grooup.length; i++){
              $scope.grp = cek.data.grooup[i].postings;
              console.log('data',$scope.grp);                                      
            }

上面的代码成功显示了数据postings,我查看了console.log,但是在ng-repeat="groups in grp"之后,我尝试显示所有posting {{groups.nim}}和{{groups.post}} 为什么他只在最后一个ID中显示数据发布59ef26cc0cfb261 8d047cc6f
那么如何显示所有的数据发布呢?在我循环之后,我从 api Group.find({nim}) 获取数据。 谢谢;)

最佳答案

您需要按如下方式合并每个帖子的数组,

 $scope.grp.push( ...$scope.result.grooup[i].postings);

演示

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
 $scope.grp=[];
 $scope.result = {
"success": true,
"grooup": [
  {
    "_id": "59eeb992a6ddc00f1037c1cf",
    "postings": [
      {
        "nim": 1137050017,
        "nama": "ADRIYANA PUTRA PRATAMA",
        "post": "hay salam kenal",
        "created_at": "2017-10-24T03:55:17.004Z"
      },
      {
        "nim": 1111111,
        "nama": "Fakih Nuzli",
        "post": "hay salam kenal",
        "created_at": "2017-10-24T04:01:14.954Z"
      }
    ]
  },
  {
    "_id": "59ef26cc0cfb2618d047cc6f",
    "postings": [
      {
        "nim": 1137050017,
        "nama": "ADRIYANA PUTRA PRATAMA",
        "post": "selata datang",
        "created_at": "2017-10-24T21:27:06.091Z"
      },
      {
        "nim": 1111111,
        "nama": "Fakih Nuzli",
        "post": "ya thanx",
        "created_at": "2017-10-24T21:27:29.384Z"
      }
    ]
  },
  {
    "_id": "59e53fcd1e85242ea417832e",
    "postings": [
      {
        "nim": 1111111,
        "nama": "Fakih Nuzli",
        "post": "hay",
        "created_at": "2017-10-24T11:19:44.318Z"
      }
    ]
  }
]};
for (var i = 0; i <  $scope.result.grooup.length; i++){
   $scope.grp.push( ...$scope.result.grooup[i].postings);
                    
 }
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li class="list-group" role="presentation" ng-repeat="groups in grp | orderBy:'created_at':true ">
  <h6 class="media-heading">{{groups.nim}}</h6>
  <h6 class="media-meta">{{groups.post}}</h6>
</li>           
</body>

关于angularjs - 如何在循环后显示所有多数据数组并使用 ng-repeat 显示所有数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46922473/

相关文章:

angularjs - 我们如何在 div 中使用 ng-keypress ?

node.js - grunt ngtemplates 任务 100% cpu

node.js - 获取 Node 中最近一次 git commit 的哈希

node.js - 无法使用@babel/preset-env运行node.js文件

javascript - Sequelize Where 语句与日期

ajax - 使用 Express 下载文件

javascript - 为什么 columnDefs 在重新排序或隐藏在 ng-grid 后没有被修改?

android - 如何在 Android 上运行的 Web 应用程序中从 CamScanner 或 Office Lens 获取文件?

javascript - 将搜索结果添加到表中而不替换以前的结果

node.js - 使用node_redis时如何访问传递给hgetall的 key ?