Javascript 随机重复显示数据

我有从数据库返回的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));
 ?>

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

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

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

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

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

js:：（切片过滤器）

---

仍然没有解决方案

这几乎是随机的。您的数据以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"}

发送

---

从服务器。当解析JSON对象时，它不会破坏顺序。

使用angularjs提供的“orderBy”过滤器

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

{{dbItem.num}
{{其他}}

我希望这有帮助。请参阅以下有关orderBy筛选器的文档

---

您可以使用以下代码：

html:：

 <?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));
 ?>

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

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

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

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

---

为了进一步阅读

我认为您应该编辑SQL以按num列对数据进行排序。SQL数据是正确的，问题发生在filter之后。如果您可以提供JSFIDLE或plnkr，那就太好了。为什么要使用“切片”过滤器？它的目的是什么？为了限制要显示的元素，可以使用“limito”过滤器。