AngularJsDemo

Small example using AngularJS.

by jwood803

HTML

<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>

JavaScript

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);
    };
});