I am trying to make some tables dynamically from an object. This is my Object
{
categories: ["kids", "home"],
home: [{
name: "home 1.1",
title: " home1.2"
}, {
name: "home 2.1",
title: "home 2.2"
}, {
name: "home 3.1",
title: "home 3.2"
}, {
name: "home 4.1",
title: "home 4.2"
}, {
name: "home 5.1",
title: "home 5.2"
}],
kids: [{
name: "kids 1.1",
title: "kids 1.2"
}]
}
My running code is
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.data = {
categories: ["kids", "home"],
home: [{
name: "home 1.1",
title: " home1.2"
}, {
name: "home 2.1",
title: "home 2.2"
}, {
name: "home 3.1",
title: "home 3.2"
}, {
name: "home 4.1",
title: "home 4.2"
}, {
name: "home 5.1",
title: "home 5.2"
}],
kids: [{
name: "kids 1.1",
title: "kids 1.2"
}]
};
$scope.getKeys = function(obj) {
if (!$scope.data.hasOwnProperty(obj)) {
return [];
}
return Object.keys($scope.data[obj][0]);
}
});<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-repeat="d in data.categories">
<tr>
<th ng-repeat="l in getKeys(d)" ng-if="$index != getKeys(d).length - 1">
{{$index != getKeys(d).length - 1}} {{l}}
</th>
</tr>
<tr ng-repeat="k in data[d]">
<td>{{k.name}}</td>
<td>{{k.title}}</td>
</tr>
</table>
</body>
</html>As you can see in the example, The condition ng-if="$index != getKeys(d).length - 1" is false, but it shows the $$hashKey column. How can I skip this??
I tried some of this answer's solutions :
- angular.copy()
- angular.toJson()
l != '$$hashKey'
Now:
- Why this condition is false, But it shows the column?
- What is the correct way to get column names for each table?
