Get the object of the selected row with ng-grid Angular-UI

Question

Get the object of the selected row with ng-grid Angular-UI

Navigation

#1 by (1 votes)

0

I'm using% s of Angular-UI and need to get the selected object when clicked on the grid line.

I have ng-grid :

$scope.selectItem = function(item)
{
    $scope.selectedItem = item;
}

I tried to write the function property of the rowTemplate object to add the click directive, like this:

rowTemplate:'<div ng-style="{ "cursor": row.cursor }" ng-repeat.....;

The above code is the default value, so I added in the first gridOptions or div to invoke the function:

rowTemplate:'<div ng-click="selectItem(o que passar aqui?)"ng-style.....;

How do I access the object present on the clicked row to pass ng-click ?

javascript angularjs

asked by anonymous 13.05.2014 / 23:01

1 answer

How to correct the error in the Log? Ajax pagination via server

score 1 · Answer 1

I checked the ng-grid documentation . As the "Master / Details" example, you can do this:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.mySelections = [];
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { 
      data: 'myData',
      selectedItems: $scope.mySelections,
      multiSelect: false
    };
});

The important thing here is the option selectedItems in gridOptions . You initialize an empty array and use the option to have the array updated with the selected items.

In the API documentation, the selectedItems option is explained as follows:

All selected items on the grid. In single select mode, there will always be only one item in the array .

To get clearer (step-by-step):

In your rowTemplate , do so:

rowTemplate:'<div ng-click="selectItem(mySelections[0])" ng-style.....;

In your controller , include:

$scope.mySelections = [];

And you will need to specify the option selectedItems in gridOptions :

$scope.gridOptions = { selectedItems: $scope.mySelections };

That is, putting everything together:

$scope.selectItem = function(item)
{
    $scope.selectedItem = item;
}

$scope.mySelections = [];

$scope.gridOptions =
{
    selectedItems: $scope.mySelections,
    rowTemplate:'<div ng-click="selectItem(mySelections[0])" ng-style...'
};

In fact, it can get simpler. Anywhere in controller you have access to the selected item with:

$scope.mySelections[0];

Or in HTML (assuming there is a "name" property):

<p>{{ mySelections[0].name }}</p>