Code
<div ng-app="app" ng-controller="appCtrl">
<m-grid grid-options="gridOptions"></m-grid>
</div>
<script>
var app = angular.module('app', ['ui.bootstrap', 'm-grid']);
app.controller('appCtrl', function($scope) {
$scope.gridOptions = {
columns: [{
name: '#',
field: 'id'
}, {
name: 'Full name',
field: 'fullName'
}, {
name: 'Action',
field: 'email',
cellTemplate: '<button class="btn btn-default btn-xs" type="button" ng-click="getExternalScope().sendMail(item.email)"><span class="glyphicon glyphicon-share-alt"></span> <span>Send email</span></button>'
}]
};
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
id: (i + 1),
fullName: 'Name ' + (i + 1),
email: 'email' + (i + 1) + '@test.com'
})
}
$scope.gridOptions.data = data;
$scope.states = {
sendMail: function(email) {
alert('Mail sent to ' + email);
}
}
})
</script>
Default we get object from states
property of $scope
. If we want to use other property of $scope
, We can pass property name in gridOptions.externalScope
.