Hey guys, I've encountered a problem that I can't seem to figure out. It appears that Google Chrome rearranges JSON data when rendering it in a way that affects 'ng-repeat'. As a result, when I load the data into the grid, the columns get reversed.
'use strict';
angular.module('grid', [])
.run(templateRun)
.directive('grid', Grid);
function templateRun ($templateCache) {
$templateCache.put('grid2.html', '<table><thead><tr><th ng-repeat="(key,value) in option.columns" ng-click="sort(value.predicate)"><strong>{{value.text}}</strong><th><tr></thead><tbody><tr ng-repeat="data in option.data"><td ng-repeat="field in data">{{field}}</td></tr></tbody></table>');
}
function Grid ($templateCache, $rootScope, $compile, $rootElement) {
return{
restrict: 'E',
scope: {
option: "=data"
},
template: $templateCache.get('grid2.html'),
link: function (scope, element, attr) {
}
}
}
angular.module("app", ["grid"])
.controller("HomeCtrl", HomeCtrl);
function HomeCtrl ($scope) {
$scope.people = [
{
name: "John",
occupation: "Programmer",
age: 5
},
{
name: "Jill",
occupation: "Analyst",
age: 10
},
{
name: "Jeff",
occupation: "Sales",
age: 2
},
{
name: "Joan",
occupation: "Designer",
age: 50
}
];
$scope.option = {
data: $scope.people,
columns: [
{
text: "Name"
},
{
text: "Occupation"
},
{
text: "Age"
}
]
}
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Grid</title>
</head>
<body ng-controller="HomeCtrl">
<grid data="option"></grid>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="grid.js"></script>
</body>
</html>
Error image: https://i.sstatic.net/RpVNe.png