Ng-repeat show data randomly
I have a json object data that is being returned from a database. Demo json object is shown 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 did some test after returning data from slice filter , data is displayed 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 :: (Edit Slice Filter)
myApp.filter('slice', function() {
return function(arr, itemNum, current) {
var begin = ((current-1)*itemNum);
var end = +begin + +itemNum;
return arr.slice(begin, end);
};
});
Not a solution yet
source to share
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 reading https://gist.github.com/kmaida/06d01f6b878777e2ea34
source to share
Use the "orderBy" filter provided by angular.
<tr ng-repeat="dbItem in info | slice: itemNum: currentItem | orderBy:'num'">
<td>{{dbItem.num}}</td>
<td>{{others}}</td>
</tr>
Hope this helps. Please refer to the following documentation regarding orderBy filter https://docs.angularjs.org/api/ng/filter/orderBy
source to share
This is all but the random ones. Your data is JSON encoded and JSON keys cannot be whole, they are strings. Therefore, your data looks like this:
{"1" : "demo1" , "2" : "demo2" , "15" : "demo15"}
and not:
{1 : "demo1" , 2 : "demo2" , 15 : "demo15"}
So, strings are sorted as strings, not numbers, which gives:
"1" - "15" - "2" - "25" - "3" - "35"
(They are sorted according to the first character, not a numeric value.)
I believe the solution is to ask MySQL to sort the data using NUM, so the encoded JSON already looks like you.
source to share
Send JSON array instead of JSON object, arrays will preserve order. JSON parsing orders properties alphabetically
instead
{"1":"something","3":"something else"}
send
[{"id":1,"data":"something"},{"id":3,"data":"something else"}]
from the server. and it will not out-of-order when parsing the JSON object.
source to share