Можно ли выбрать снизу внутри сетки AngularJS?

Question

Я кодируются следующим образом:

$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 фактически содержит четыре colums Id, имя, статус и описание. Где статус - это простой массив javascript с тремя типами статуса, называемыми myStatus.

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

Answer 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> 

(. Это было бы красивым, если мы можем написать ogirinal данных через row объекта я не знаю, как.)

Answer 2

Путь Тош 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> 

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

Answer 3

Более полный/опрятнее способ сделать это в нг сетке 2.x Я включил в plunker здесь: http://plnkr.co/edit/VABAEu?p=preview, используя содержание от другого подобного вопроса на StackOverflow здесь: AngularJS and ng-grid - auto save data to the server after a cell was changed

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

 $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/

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

Answer 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}" />';

COL_FIELD конечно важно сохранить ссылку на ячейку исправить.

Вы можете захватить изменение изначально:

$scope.$on('ngGridEventEndCellEdit', function (evt) { 
 
      console.log(evt.targetScope.row.entity); 
 
      WaitListArray.$save(evt.targetScope.row.entity) 
 
       .then(function (ref) { 
 
        console.log('saved'); 
 
       }); 
 
     });

В этом случае WaitListArray является моим Firebase/AngularFire массив для таблицы. Используя этот метод, я смог сохранить привязку к дереву.

Field (нг-опция):

Я добавил фильтр заменить идентификатор с наклейкой для моих выпадающих значений.

.filter('mapStatus', function() { 
 
    return function(input, OptionsList) { 
 
    var _out = 'unknown'; 
 
    angular.forEach(OptionsList, function(value, key) { 
 

 
     if (value && value.id == input) { 
 
     _out = value.label; 
 
     } 
 
    }); 
 
    return _out; 
 

 
    }; 
 
})

В приведенном выше, OptionsList мои выпадающие значения массива пример: {ID: 1, метка: "Label1"}

Я нашел это решение весьма многоразовые. Надеюсь, это сэкономит время для кого-то.