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>

and then within the app.js I have a factory to get the data but ultimately within the controller I have:

limo.limoData =results

У меня также есть директива ng-repeat, которая создает некоторый дополнительный пользовательский интерфейс формы, который также привязан к тем же данным (эти данные доступны для редактирования), это отлично работает как стандартный материал AngularJS.

Затем я попытался изменить объект результатов на CollectionView, например:

limo.limoData =new wijmo.collections.CollectionView(results);

Это исправило сетку, отображающую данные немедленно, но сломало элемент управления ng-repeat.

Конечно, я мог бы иметь 2 объекта области: 1 как CollectionView, другой как стандартные данные, но мне нужно, чтобы редактируемые обновления из ng-repeat отражались в сетке, поэтому в идеале они должны быть привязаны к одному и тому же объекту.


angularjs wijmo wijgrid
person markbarton    schedule 10.11.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Что вы хотите сделать, так это привязать свой ng-repeat к свойству 'items' вашего CollectionView. Вот пример того, как это сделать.

http://jsfiddle.net/1r4ebc33/1/

Ваш код может выглядеть так:

<ul>
    <li ng-repeat="item in limo.limoData.items">
     {{booking.status}} 
    </li>
  </ul>
person Banzor    schedule 10.11.2014
comment
Рад, что это работает. Похоже, мы могли бы использовать это в наших документах... ;) - person Banzor; 10.11.2014
comment
В моем первоначальном ответе предлагалось использовать CollectionView.sourceCollection. Я пересмотрел его, чтобы рекомендовать CollectionView.items. Элементы будут отражать отсортированное/отфильтрованное представление данных, тогда как sourceCollection будет необработанными данными. - person Banzor; 10.11.2014