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>