jwood803
9/1/2013 - 4:40 PM

Small demo for AngularJS.

Small demo for AngularJS.

Index.html
content_copyfile_download
<!DOCTYPE html>
<html ng-app="demoApp">
    <head>
        <title>AngularJS Demo - Index</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
        <script src="EmployeeController.js"></script>
    </head>
    <body>
        <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>        
    </body>
</html>
EmployeeController.js
content_copyfile_download
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);
    };
});