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">
  <div>
    <button type="button" ng-click="addItem()">Add New</button>
  </div>
  <br>
  <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>

CSS

th {
  background: #eee;
  padding: 1px 3px;
}

JavaScript

angular.module('myApp', [])
  .controller('ListCtrl', ListCtrl);

ListCtrl.$inject = ['$scope'];

function ListCtrl($scope) {
  $scope.students = [{
    id: 1,
    name: "oz",
    data: "best student",
    grade: "100",
    subject: "computer science"
  }, {
    id: 2,
    name: "avi",
    data: "only student",
    grade: "80",
    subject: "computer science"
  }, {
    id: 3,
    name: "matan",
    data: "good student",
    grade: "90",
    subject: "computer science"
  }, {
    id: 4,
    name: "oz",
    data: "best student",
    grade: "95",
    subject: "computer science"
  }];;
  var nextId = 5;

  $scope.addItem = function(item) {
    $scope.students.push({
      id: nextId++,
      name: "Bear",
      data: "new row",
      grade: "99",
      subject: "computer science"
    });
  }


  $scope.removeItem = function(item) {
    for (var i = 0; i < $scope.students.length; i++) {
      if (item.id === $scope.students[i].id) {
        $scope.students.splice(i, 1);
        return;
      }
    }
  }
}