<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{id:1,name: "Moroni", age: 50},
{id:2,name: "Tiancum", age: 43},
{id:3,name: "Jacob", age: 27},
{id:4,name: "Nephi", age: 29},
{id:5,name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
multiSelect: false,
enableRowSelection: false,
columnDefs : [{
field:'name',
displayName:'Radio',
cellTemplate :'<div style="text-align:center"><input type="radio" name="ret" value="{{row.rowIndex}}" ng-click="uncheck($event,row)"></div>'
},
{
field:'name',
displayName:'Name'
},{
field:'age',
displayName:'Age'
}]
};
$scope.uncheck = function (event,row) {
var obj = event.target;
if($(obj).attr('previousValue') == 'true'){
$(obj).attr('checked', false);
} else {
$('input[name=ret]').attr('previousValue', false);
}
$(obj).attr('previousValue', $(obj).prop('checked'));
//alert(row.getProperty('name'));
};
});
/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
Radio button in Ng - Grid with check & uncheck options.