AngularJS | Dynamic table with form

AngularJS | Dynamic table with form

by Joseph Sjoblom

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="myapp" ng-controller="ListController">     
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form ng-submit="addNew(personalDetails)">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="First name" ng-model="personalDetails.fname" required>   
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Last name" ng-model="personalDetails.lname" required>   
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email" ng-model="personalDetails.email" required>  
                            </div>
                            <div class="form-group">
                                <select class="form-control" ng-model="personalDetails.jobtype" ng-options="jobtype for jobtype in jobtypes"></select>
                            </div>
                            <div class="form-group" ng-repeat="hobby in hobbies">
                              <label>
							  		<input type="checkbox" ng-model="hobby.isChecked">
								  	<span>{{hobby.name}}</span>
                              </label>
                            </div>
                            <div class="clearfix">
                                <input type="submit" value="Submit" class="btn btn-primary">    
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" ng-hide="!personalDetails.length">
     ...

CSS

.container{
  margin: 20px 0;
}

JavaScript

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
	 	$scope.jobtypes = ['accountant', 'janitor', 'ceo', 'receptionist'];
    	$scope.hobbies = [{name: "long walks on the beach", id: "1", isChecked: false},{name: "eating cheese", id: "2", isChecked: false},{name: "writing haikus", id: "3", isChecked: false},{name: "looking for bigfoot", id: "4", isChecked: false},{name: "watching police academy", id: "5", isChecked: false}];
    $scope.personalDetails = [
        {
            'fname':'Muhammed',
            'lname':'Shanid',
            'jobtype': 'ceo',
            'email':'[email protected]',
            'active': true,
            'hobbies': [{name: "long walks on the beach", id: "1"},{name: "watching police academy", id: "5"}]
        },
		
        {
            'fname':'John',
            'lname':'Abraham',
            'jobtype': 'accountant',
            'email':'[email protected]',
            'active': true,
            'hobbies': [{name: "writing haikus", id: "3"},{name: "looking for bigfoot", id: "4"}]
        },
        {
            'fname':'Roy',
            'lname':'Mathew',
            'jobtype': 'janitor',
            'email':'[email protected]',
            'active': false,
            'hobbies': [{name: "eating cheese", id: "2"}]
        }];
    
        $scope.addNew = function(personalDetails){
            $scope.personalDetails.push({ 
                'fname': personalDetails.fname, 
                'lname': personalDetails.lname,
                'email': personalDetails.email,
                'jobtype': personalDetails.jobtype,
				'hobby': personalDetails.hobby,
            });
            $scope.PD = {};
        };
    
        $scope.remove = function(){
            var newDataList=[];
            $scope.selectedAll = false;
            angular.forEach($scope.personalDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected);
               ...