So I have a list of products; their columns change dynamically apart from two. There will always be an id column and a name column. How can I get ng-repeat to show the values of the other columns without knowing what they are until runtime?
Asked
Active
Viewed 1,050 times
0
-
It's always better to explain with an Example. – Jenson M John May 16 '16 at 17:05
-
Does this help you? http://stackoverflow.com/questions/26377799/bind-dynamic-columns-to-a-table-using-angularjs – mariocatch May 16 '16 at 17:07
2 Answers
0
I'm not sure what kind of layout you're looking for, but something like this basically takes all of the members of an object and throws them into an array that you can iterate with ng-repeat.
<html>
<head>
<link rel="stylesheet"
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<table>
<tr ng-repeat="room in ctrl.rooms | filter: ctrl.expand">
<td ng-repeat="prop in room.props">
{{room[prop]}}
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script>
<script>
angular.module("app",[]).controller("myController", myController)
function myController() {
var vm = this
vm.rooms = [
{
name: 'Room 1',
floor: 1,
carpet: "shag"
},
{
name: 'Room 2',
doors: 2,
windows: 4
},
{
name: 'Room 3',
size: "12x12",
color: "green"
}
];
vm.expand = function(room) {
if (!room.props) {
room.props=[];
for (var prop in room) {
if (prop.indexOf("$") != 0 && prop !=="props") {
room.props.push(prop)
}
}
}
return true;
}
}
</script>
</body>
</html>
Without the function call, you can also use something like this:
<div ng-repeat="room in ctrl.rooms">
<div ng-repeat='(key, val) in room'>
<p>{{key}}: {{val}}</p>
</div>
</div>
Mike Feltman
- 5,160
- 1
- 17
- 38
0
Not entirely sure about what you're working with here but you could sift out data with a filter and ng-repeat.
