Angular-ui-grid strings from object keys
I have a container of objects that are stored indexed by their id in a hash.
myObjs = {
"hello id":{
foo:"hello foo data",
bar:"hello bar data"
},
"world id":{
foo:"world foo data",
bar:"world bar data"
}
}
I would like to bind every object in myObjs to a row in the ui-grid ( http://ui-grid.info/ ). In a general table, it will look like this:
<table>
<tr ng-repeat="(id, obj) in myObjs">
<td>{{id}}</td>
<td>{{obj.foo}}</td>
<td>{{obj.bar}}</td>
</tr>
</table>
One solution is to get a new array of objects from myObjs content to use as input to the ui-grid, but that would mean I would have to maintain a binding between myObjs and the input array.
Is there a more natural way to bind ui-grid to myObjs?
source to share
Can you provide a fiddle / plunger that shows what you are trying to do? ng-repeat can iterate through an object in the same way it can iterate over an array, so there is no need to create a derived array from your object.
I created it here: Plunk It looks like it works great, so I'm not sure what the problem is.
HTML:
<html ng-app="App">
<head>
<title>AngularJS Plunker</title>
<!-- AngularJS - MVVM Pattern -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<!-- Page Specific -->
<script src="client.js"></script>
</head>
<body ng-controller="Controller">
<table border="1">
<tr ng-repeat="(id, obj) in myObjs">
<td>{{id}}</td>
<td>{{obj.foo}}</td>
<td>{{obj.bar}}</td>
</tr>
</table>
</body>
</html>
JS:
var app = angular.module('App', []);
app.controller('Controller', function ($scope) {
$scope.myObjs = {
"hello id":{
foo:"hello foo data",
bar:"hello bar data"
},
"world id":{
foo:"world foo data",
bar:"world bar data"
}
}
});
source to share