Angular: Empty Fiddle
http://angularjs.org/
by Bruno Sabetta
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="ListCtrl">
<button type="button" ng-click="addItem()">Add</button>
<table border="1">
<thead>
<tr>
<th>student id</th>
<th>student name</th>
<th>student data</th>
<th>student grade</th>
<th>student subject</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in students">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.data }}</td>
<td>{{ item.grade }}</td>
<td>{{ item.subject }}</td>
<td>
<button type="button" ng-click="removeItem(item)">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('ListCtrl', function() {});
function ListCtrl($scope) {
$scope.students = [
{
id:"123",
name:"oz",
data:"best student",
grade:"100",
subject:"computer science"
},
{
id:"1234",
name:"avi",
data:"only student",
grade:"80",
subject:"computer science"
},
{
id:"1235",
name:"matan",
data:"good student",
grade:"90",
subject:"computer science"
},
{
id:"123",
name:"oz",
data:"best student",
grade:"95",
subject:"computer science"
},
{
id:"123",
name:"oz",
data:"best student",
grade:"80",
subject:"computer science"
},
{
id:"123",
name:"oz",
data:"best student",
grade:"50",
subject:"computer science"
}
];;
var idUnique = 1;
$scope.addItem = function(item) {
$scope.student.push({
id: idUnique++,
name: "Bear",
data: "new row",
grade: "99",
subject: "computer science"
});
}
$scope.removeItem = function(item) {
for (var i = 0; i < $scope.student.length; i++) {
if (item.id === $scope.student[i].id) {
$scope.student.splice(i, 1);
return;
}
}
}
}