Wijmo 5 - Flexgrid & AngularJS - использование одного источника данных для других директив области видимости
Опробуйте новую Flex-сетку от Wijimo 5 вместе с AngularJS.
Мое приложение загружает данные через HTTP-вызов, и Grid привязывается к объекту уровня контроллера в качестве источника данных. Если я просто делаю стандартный HTTP-вызов Angular и задаю объект, то Grid не отображает данные, пока я не нажму на заголовки столбцов.
Так что-то вроде этого:
<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>
и затем в app.js у меня есть фабрика для получения данных, но в конечном итоге в контроллере у меня есть:
limo.limoData =results
У меня также есть директива ng-repeat, которая создает некоторый дополнительный пользовательский интерфейс формы, который также привязан к тем же данным (эти данные доступны для редактирования), это прекрасно работает как стандартный материал AngularJS.
Затем я попытался изменить объект результатов на CollectionView - вот так:
limo.limoData =new wijmo.collections.CollectionView(results);
Это исправило отображение таблицы Grid немедленно, но нарушило управление ng-repeat.
Конечно, я мог бы иметь 2 объекта области видимости: один в виде CollectionView, другой в качестве стандартных данных, но мне нужно, чтобы редактируемые обновления из ng-repeat были отражены в сетке, поэтому в идеале они должны быть связаны с одним и тем же объектом.
1 ответ
То, что вы хотите сделать, это связать ваш ng-repeat со свойством 'items' вашего CollectionView. Вот пример того, как это сделать.
http://jsfiddle.net/1r4ebc33/1/
Ваш код может выглядеть так:
<ul>
<li ng-repeat="item in limo.limoData.items">
{{booking.status}}
</li>
</ul>