Возможно ли, чтобы вы выбрали снимок внутри сетки AngularJS?

Я закодировал следующее:

$scope.gridOptions = {
    data: 'myData',
    enableCellEdit: true,
    multiSelect: false,
    columnDefs: [
        { field: 'Id', displayName: 'Id' },
        { field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
        { field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
    ]
};

В myData на самом деле содержится четыре идентификатора, имя, статус и описание. Где статус - это простой массив javascript с тремя типами статуса, называемыми myStatus.

Возможно ли, чтобы я каким-то образом связал данные myStatus с полем в ng-сетке, чтобы затем выбрать новое значение из раскрывающегося списка?

Ответ 1

Вот результат некоторого эксперимента.

http://plnkr.co/edit/W1TkRgsp0klhqquxaiyc?p=preview

Кажется, вы можете поместить select в шаблон ячейки. И вы можете использовать объект row для получения тебе нужно. Я использовал row.rowIndex для доступа к исходным данным.

Пример шаблона

<div>
  <select ng-model="myData[ row.rowIndex ].myStatus">
    <option ng-repeat="st in statuses">{{st}}</option>
  </select>
</div>

(Было бы хорошо, если бы мы могли писать огиринные данные через row объект. Я не знаю, как.)

Ответ 2

Способ tosh shimayama делает это, не позволит сортировать таблицу в любом другом порядке, чем массив модели.

Это своего рода уродливый способ сделать это, но я быстро просмотрел исходный код для ng-grid и обнаружил, что они используют regexp для вставки ng-модели. Таким образом, используя ту же переменную COL_FIELD в вашем коде, вы можете сделать ng-grid вставить правильную модель.

<div>
  <select ng-model="COL_FIELD">
    <option ng-repeat="status in statuses">{{status}}</option>
  </select>
</div>

Вот плункер с рабочим примером: http://plnkr.co/edit/Yj2qmI?p=preview

Ответ 3

Более полный/более аккуратный способ сделать это в ng-grid 2.x Я включил в plunker здесь: http://plnkr.co/edit/VABAEu?p=preview, используя контент из другого аналогичного вопроса в stackoverflow: AngularJS и ng-grid - автоматическое сохранение данных на сервере после изменения ячейки

В заключение, мой формат для редактируемого шаблона поля выглядит так:

      $scope.statuses = {1: 'active', 2: 'inactive'};
      $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" 
         ng-input="COL_FIELD" ng-model="COL_FIELD" 
         ng-options="id as name for (id, name) in statuses" 
         ng-blur="updateEntity(row)" />';

Я предоставил сообщение в блоге, в котором более подробное описание сквозного кода: http://technpol.wordpress.com/2013/12/06/editable-nggrid-with-both-dropdowns-and-selects/ p >

Ng-grid (ui-grid) 3.0 близок к выпуску и предлагает различные способы редактирования редактируемых сеток. У меня есть сообщение об этом здесь: http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Ответ 4

Я не могу взять кредит на все решение. Я просто собрал кусочки. Моя цель состояла в том, чтобы сохранить трехстороннюю привязку.

Шаблон должен выглядеть примерно так:

        $scope.cellSelectEditableTemplate = '<select ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" ng-options="value.id as value.label for value in OptionsList}" />';