Не удается определить выбор строки в ui.grid

Question

У меня есть угловая сетка ui, работающая с выбором, я хочу заполнить форму содержимым выбранной записи. Я не вижу возможности ссылаться на выбранную запись или обнаруживать, что выбран ряд строк. Есть идеи?

Answer 1

Обычно принято публиковать то, что вы пробовали, подумайте об этом в будущем. Вот короткий пример, который использует событие afterSelectionChange для нг-сетки:

Сетки с двумя дивами, чтобы удерживать выбранные данные:

<div class='gridStyle' ng-grid='testGridOptions'></div> 
<div>{{current.name}}</div> 
<div>{{current.age}}</div> 

несколько тестовых данных:

$scope.testData = [{name:'John', age:25}, 
        {name:'Mary', age:30}, 
        {name:'Fred', age:10}, 
        {name:'Joan', age:20}]; 

конфигурация для сети:

$scope.testGridOptions = { 
        data: 'testData', 
        multiSelect: false, 
        afterSelectionChange: function(data){ 
         $scope.current = data.entity; 
        } 
}; 

Надеюсь, что с этого вы начнете.

Айдан

Answer 2

С Ui-сеткой апите немного отличается, чем пример нг сетки Айдан публикуемой.

Обычно вы бы слушать rowSelectionChanged события, см: http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi

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

$scope.selectionChanged = function(rowChanged) { 
    if(rowChanged.isSelected){ 
    $scope.targetRow = rowChanged; 
    } 
}; 

gridOptions = { 
    // other stuff 
    onRegisterApi: function(gridApi) { 
    $scope.gridApi = gridApi; 
    $scope.gridApi.selection.on.rowSelectionChanged($scope, $scope.selectionChanged); 
    } 
}; 

Затем вы должны быть в состоянии использовать $ scope.targetRow в качестве цели для вашей формы. Вероятно, вам нужно отключить мультиселекцию (проверьте выделение gridOptions или учебник по выбору) и рассмотрите, что происходит, когда ни одна строка не выбрана.

В моем приложении я склонен делать форму как всплывающее окно (модальная или отдельная страница). Когда я делаю это, это намного проще, я просто делаю событие click на самой строке или (чаще) кнопку в строке. Обратите внимание, например, на http://ui-grid.info/docs/#/tutorial/305_appScope. Вы можете передать строку, которая была нажата на в этот клик обработчик:

cellTemplate:'<button ng-click="grid.appScope.openModal(row.entity)">Edit</button>' } 

Вы можете передать объект (который был бы ngResource) в модальных, и как только он редактирует его, то он может просто позвонить сэкономить на ресурс, когда это будет сделано.

я сделал что-то похожее на это в моем (нг-сетки на основе) учебник серии: https://technpol.wordpress.com/2013/11/09/angularjs-and-rails-4-crud-application-using-ng-boilerplate-and-twitter-bootstrap-3-tutorial-index/