Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-repeat show data randomly

I have json object data which is returned from database. My json object's demo is given below::

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

when I show $scope.info json data in ng-repeat, it shows data randomly not based on num.

Sample output::

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

I have done some test, after returning data from slice filter, data shows randomly.

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

How can I solve this problem? Thanks in advance.

Edit::

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

Still no solution

like image 290
sabbir Avatar asked Sep 23 '26 22:09

sabbir


1 Answers

You can use the following code:

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

For further read https://gist.github.com/kmaida/06d01f6b878777e2ea34

like image 193
patrika365 Avatar answered Sep 25 '26 12:09

patrika365



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!