随机重复显示数据

ng-repeat show data randomly

本文关键字：数据 显示 随机      更新时间：2023-09-26

我有json对象数据，从数据库返回。我的json对象的演示如下::

 $scope.info = [
   {
     "num": 1,
     "col1": "demo1",
     "col2": "demoX1"
   },
   {
     "num": 2,
     "col1": "demo2",
     "col2": "demoX2",
   },
   ................................
   ................................ 
   {
     "num": 15,
     "col1": "demo15",
     "col2": "demoX15",
   }
   .................................
   ................................   
];
php:

: 

 <?php
     // sorted by num
     $sql = "SET @num:=0; SELECT @num:=@num+1 AS num, t.* FROM table as t";
     //convert array data to json data
     $getData = json_encode(GetAllDataFromServer($sql));
 ?>

html:: 

 <table>
      <tr ng-repeat="dbItem in info | slice: itemNum: currentItem">
         <td>{{dbItem.num}}</td>
         <td>{{others}}</td>
      </tr>
 </table>
  <pagination total-items="info.length" ng-model="currentItem" max-size="7" class="pagination" boundary-links="true" items-per-page="15"></pagination>
 <script>
     angular.module("App")
       .controller("NamController", function($scope)  {
            // json data from database
            $scope.info = <?=$getData ?>;
            $scope.currentItem = 1; 
            $scope.itemNum = 15;
       });
 </script>

当我在ng-repeat中显示$scope.info json数据时，它会随机显示数据，而不是基于num。

输出示例::

num  -  col1   -  col2
---------------------------
1    -  demo1   -  demoX1
15   -  demo15  -  demoX15
9    -  demo9   -  demoX9
............................
............................

我做了一些测试，从切片过滤器返回数据后，数据随机显示。

js::(slice filter)

myApp.filter('slice', function() {
   return function(arr, itemNum, current) {
      var lt = ((current-1)*itemNum);
      var gt = +lt + +itemNum;
      var data = {};
      i = 0;
      angular.forEach(arr, function(val, index) {            
         if ( index >= lt && index < gt ) {
            data[i++] = val;
        }
      });
      return data;
   };
});

我该如何解决这个问题?提前谢谢。

编辑::

js::(slice filter Edit)

myApp.filter('slice', function() {
   return function(arr, itemNum, current) {
      var begin = ((current-1)*itemNum);
      var end = +begin  + +itemNum;        
      return arr.slice(begin, end);
   };
});

仍无解

您可以使用以下代码:

html:: 

 <table>
      <tr ng-repeat="dbItem in info | startFrom:(currentItem-1)*itemNum | limitTo:itemNum">  
     <td>{{dbItem.num}}</td>
     <td>{{others}}</td>
  </tr>
</table>
 <pagination total-items="info.length" ng-model="currentItem" max-size="7" class="pagination" boundary-links="true" items-per-page="{{itemNum}}"></pagination>

js: 

 myApp.filter('startFrom', function() {
    return function(input, start) {
       start = +start; //parse to int
       return input.slice(start);
    }
 });

进一步阅读https://gist.github.com/kmaida/06d01f6b878777e2ea34

使用angularjs提供的'orderBy'过滤器。

<tr ng-repeat="dbItem in info | slice: itemNum: currentItem | orderBy:'num'">
         <td>{{dbItem.num}}</td>
         <td>{{others}}</td>
      </tr>

我希望这对你有帮助。请参考以下关于orderBy过滤器的文档https://docs.angularjs.org/api/ng/filter/orderBy

这几乎是随机的。您的数据以JSON格式编码，JSON键不能是整数，它们是字符串。所以你的数据看起来像:

{"1" : "demo1" , "2" : "demo2" , "15" : "demo15"}

和非

{1 : "demo1" , 2 : "demo2" , 15 : "demo15"}

所以字符串被排序为字符串，而不是数字，这产生:

"1" - "15" - "2" - "25" - "3" - "35"

(它们根据第一个字符排序，而不是数值)

我相信解决方案是要求MySQL按NUM排序数据，所以编码的JSON已经像你想要的。

发送JSON数组而不是JSON对象，数组将保留顺序。JSON解析按字母顺序排列属性

不是

 {"1":"something","3":"something else"}

发送

 [{"id":1,"data":"something"},{"id":3,"data":"something else"}]

从服务器。并且在解析JSON对象时不会打乱顺序。

相关文章：