<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="mapp">
<div ng-controller="mctrl">
<h4>Please select an row to edit:</h4>
<div style="text-align:right">
<button class="btn btn-primary" ng-disabled="editmn" ng-hide="editmode" ng-click="edit()">Edit</button>
</div>
<form name="editform" role="form" ng-show="editmode">
<div class="form-group">
<label for="nm">Name:</label>
<input name="nm" type="text" id="nm" ng-model="rowUnderEdit.name" />
</div>
<div class="form-group">
<label for="pnt">Points:</label>
<input name="pt" type="text" id="pnt" ng-model="rowUnderEdit.points" />
</div>
<div class="form-froup">
<button type="button" ng-disabled="editform.$pristine" class="btn btn-success" ng-click="save()">Save</button>
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
<br/>
<table class="table table-striped" border="2">
<thead>
<th>Select for editing</th>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr ng-repeat="nm in names" ng-class="{mcls:nm.checked}">
<td>
<input ng-disabled="editmode" type="radio" value="{{nm.name}}" name="ip" ng-model="nm.checked" ng-click="resetAll(nm)" />
</td>
<td>{{nm.name}}</td>
<td>{{nm.points}}</td>
</tr>
</tbody>
</table>
<span ng-class="{mcls:checked}">{{nm.name}}</span>
</div>
</body>
</html>
// Code goes here
var myapp = angular.module('mapp', []);
myapp.controller("mctrl", function($scope) {
$scope.check = "";
$scope.editmn = true;
$scope.showfrm = false;
$scope.edit = function() {
$scope.editmode = true;
$scope.rowUnderEdit = angular.copy($scope.currentrow);
}
$scope.cancel = function() {
$scope.editmode = false;
$scope.rowUnderEdit = {};
}
$scope.save = function() {
$scope.currentrow.name = $scope.rowUnderEdit.name;
$scope.currentrow.points = $scope.rowUnderEdit.points;
$scope.editmode = false;
$scope.resetAll({});
}
$scope.names = [{
name: "John",
points: 35
}, {
name: "David",
points: 55
}, {
name: "Paul",
points: 12
},
{
name: "Allen",
points: 23
},
{
name: "Phill",
points: 44
}
];
$scope.resetAll = function(currentRow) {
angular.forEach($scope.names, function(val) {
if (val.name !== currentRow.name) {
val.checked = false;
} else {
$scope.currentrow = val;
}
$scope.editmn = false;
});
}
});
/* Styles go here */
.mcls{
color:red
}