Question

我有从数据库返回的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 ::(切片过滤器）

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 ::（切片过滤器编辑）

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

仍无解决方案

Answer 1

使用＆＃39; orderBy＆＃39;由angularjs提供的过滤器。

<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

Answer 2

您可以使用以下代码：

<强> 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

Answer 3

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

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

而不是：

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

因此字符串按字符串排序，而不是数字，这会产生：

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

（它们根据第一个字符排序，而不是数值。）

我认为解决方案是让MySQL按NUM排序数据，因此编码的JSON已经是你想要的了。

Answer 4

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

而不是

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

发送

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

来自服务器。并且在解析JSON对象时不会破坏顺序。

ng-repeat随机显示数据

4 个答案: