Learning Angular

by Sean Wessell

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-controller="mainController" class="container">
    <div class="col-xs-8 col-xs-offset-2">
        <div class="input-group" ng-class="err ? 'has-error' : ''">
            <input type="text" id="newEmployee" ng-model="newEmployee" class="form-control" /> <span class="input-group-btn">
            <button ng-click="addEmployee()" class="btn btn-default">Add</button>
      </span>

        </div>
        <table class="table">
            <tr ng-repeat='ee in employees' ng-click='load(ee)'>
                <td ng-bind="ee"></td>
                <td><a class="btn pull-right" ng-click="remove(ee)">Delete</a>

                </td>
            </tr>
        </table>
        <p class="alert alert-danger" ng-hide="!err">{{err}}</p>
    </div>
</div>

CSS

body{
    padding-top:18px;
}
label {
    display:block;
}
.has-error .btn {
    border-color: darkred;
    color:darkred;
}

JavaScript

var $ = function (s) {
    return document.querySelector(s);
}

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function ($scope) {
    $scope.resetForm = function () {
        $scope.newEmployee = "";
        $scope.err = "";
    };
    $scope.err = "";

    $scope.newEmployee = "";
    $scope.employees = ['Sean Wessell', 'Rich Norton', 'Rob McCollough', 'Mike Bondi'];
    $scope.addEmployee = function () {
        if ($scope.newEmployee.length > 0) {
            $scope.employees.push($scope.newEmployee);
            $scope.resetForm();
        } else {
            $scope.err = "Please enter employee name!";
        }
    }
    $scope.remove = function (item) {
        var index = $scope.employees.indexOf(item);
        $scope.employees.splice(index, 1);
    }
});