In this post you are going to learn how to get the selected rows from ng-grid in AngularJS.
Read our previous posts on ng-grid: ng-grid in AngularJS
If you are using a ng-grid then you may need to get the selected rows. You can do this using selectedItems property.
Based on the ng-grid document(http://angular-ui.github.io/ng-grid/) selectedItems is the property of ng-grid .
Consider you have a ng-grid like below.
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
and your javascript would be
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];
//define a array to hold selected rows
$scope.selectedRows=[];
$scope.myGrid={
data:'myData',
selectedItems:$scope.selectedRows
};
Now you can use $scope.selectedRows array to show the selected rows like below.
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
</div>
</body>
Read our previous posts on ng-grid: ng-grid in AngularJS
If you are using a ng-grid then you may need to get the selected rows. You can do this using selectedItems property.
Based on the ng-grid document(http://angular-ui.github.io/ng-grid/) selectedItems is the property of ng-grid .
Consider you have a ng-grid like below.
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
and your javascript would be
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];
//define a array to hold selected rows
$scope.selectedRows=[];
$scope.myGrid={
data:'myData',
selectedItems:$scope.selectedRows
};
Now you can use $scope.selectedRows array to show the selected rows like below.
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
</div>
</body>
Selecting single row in ng-grid:
If you want your users to click on only one row(single row) of ng-grid then you can do it by using "multiSelect: false" property. By default the multiSelect property will be set to true so that grid allows us to click on more than one row.To disable multiSelect of ng-grid then change your javascript to
$scope.myGrid={
data:'myData',
multiSelect:false,
selectedItems:$scope.selectedRows
};
Now to show the selected value use below code
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
<pre>{{selectedRows}}</pre>
</div>
</body>
In this way you can get the selected rows form ng-grid in AngularJS
Hope it helps you.
For more useful posts on AngularJS visit: AngularJS
