var demoApp = angular.module('demoApp', []); demoApp.controller('EmployeeController', function ($scope) { $scope.employees = [{ firstName: 'John', lastName: 'Doe', department: 'IT' }]; $scope.addEmployee = function () { $scope.employees.push({ firstName: $scope.employeeFirstName, lastName: $scope.employeeLastName, department: $scope.employeeDepartment }); // Reset items for the next add $scope.employeeFirstName = ''; $scope.employeeLastName = ''; $scope.employeeDepartment = ''; }; $scope.removeEmployee = function (index) { $scope.employees.splice(index, 1); }; });
<body> <div ng-app="demoApp"> <h3>Employees</h3> <div ng-controller="EmployeeController"> <ul style="list-style-type: none"> <li ng-repeat="employee in employees">[<a href="" ng-click="removeEmployee($index)">X</a>] <b>Name:</b> {{ employee.firstName }} {{ employee.lastName }} <b>Department:</b> {{ employee.department }} <br/> </li> </ul> <form ng-submit="addEmployee()"> <input type="text" ng-model="employeeFirstName" placeholder="First name" /> <input type="text" ng-model="employeeLastName" placeholder="Last name" /> <input type="text" ng-model="employeeDepartment" placeholder="Department" /> <input type="submit" value="Add Employee" /> </form> </div> </div> </body>