Trying out the new Flex grid from Wijimo 5 along with AngularJS.
My app loads data via a HTTP call and the Grid is bound to a controller level object as its data source. If I just do a standard Angular HTTP call and set the object then the Grid does not display the data until I click on the column headers.
So something like this:
<body ng-controller="LimoController as limo">
<wj-flex-grid items-source="limo.limoData" show-groups="false" >
<wj-flex-grid-column
header="Status"
binding="booking.status"
width="*"></wj-flex-grid-column>
<wj-flex-grid-column
header="Pickup Date"
binding="from.date"
format="d MMMM"
width="*"></wj-flex-grid-column>
</wj-flex-grid>
and then within the app.js I have a factory to get the data but ultimately within the controller I have:
limo.limoData =results
I also have a ng-repeat directive which is creating some additional form UI which is also bound to the same data (this data is editable), this works fine as its standard AngularJS stuff.
I then tried changing the results object to a CollectionView - like this:
limo.limoData =new wijmo.collections.CollectionView(results);
This fixed the Grid displaying the data immediately but broke the ng-repeat control.
I could of course have 2 scope objects, 1 as a CollectionView the other as standard data but I need the editable updates from the ng-repeat to be reflected in the grid so ideally they need to be bound to the same object.
What you want to do is bind your ng-repeat to the 'items' property of your CollectionView. Here is an example of doing that.
http://jsfiddle.net/1r4ebc33/1/
Your code might look like this: