Basic angularjs

This is an assignment from the company that i applied a job in developer postion. they give me an example for test my skill and this is a first step to learn about angularjs. it is about 6 hours to learn and builts it. I think it's interesting and easy to understand

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sanroo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/css/xeditable.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/js/xeditable.js"></script>

table { border-collapse: collapse; width: 100%; border: 1px white; margin-bottom: 20px; }

table tr:first-child th:first-child { border-top-left-radius: 10px; }

table tr:first-child th:last-child { border-top-right-radius: 10px; }

table tr:last-child td:first-child { border-bottom-left-radius: 10px; }

table tr:last-child td:last-child { border-bottom-right-radius: 10px; }

th, td { text-align: left; padding: 8px; }

td{ padding-left: 20px }

tr:nth-child(even) { background-color: #f2f2f2; }

th { background-color: #4CAF50; color: white; padding: 20px 20px 20px 20px; font-size: 20px }

tr td:last-child { width: 1%; white-space: nowrap; }

button,.cancle_button,.add_button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; }

#add_button,.save_button { background-color: #7f52c2; }

.edit_button { background-color: #4CAF50; }

.delete_button { background-color: #d68f8f; }

.cancle_button { background-color: #bbc2b2; }

input,select { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } </style > </head>

<body>

<div ng-app="myApp" ng-controller="Ctrl"> <table> <tr> <th style="width:20%">Name</th> <th style="width:20%">Age</th> <th style="width:20%">Nickname</th> <th>Action</th> </tr> <tr ng-repeat="user in users"> <td> <span editable-text="user.name" onbeforesave="saveNameUser($data,$index)" e-form="rowform"> {{ user.name || 'empty' }} </span> </td> <td> <span editable-select="user.age" onbeforesave="saveAgeUser($data,$index)" e-form="rowform" e-ng-options="s.text as s.text for s in age"> {{ user.age || 'empty' }} </span> </td> <td> <span editable-text="user.nick" onbeforesave="saveNickNameUser($data,$index)" e-form="rowform"> {{ user.nick || 'empty' }} </span> </td> <td>  <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline"> <button class="save_button" type="submit" ng-disabled="rowform.$waiting" > Save </button> <button class="cancle_button" type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()"> Cancel </button> </form> <div class="buttons" ng-show="!rowform.$visible"> <button class="edit_button" ng-click="rowform.$show()">Edit</button> <button class="delete_button" ng-click="removeUser($index)">Delete</button> </div> </td>

</tr>

</table>  <div ng-show="show"> <input id="Text1" type="text" ng-model="newUser_Name" placeholder="Your name"/> <select id="Select1" ng-model="newUser_Age"> <option ng-repeat="user in age" > {{ user.text || 'empty' }}</option> </select> <input id="Text1" type="text" ng-model="newUser_Nick" placeholder="Your Nick name" /> <input id="Button1" type="button" class="add_button" value="Save" ng-click="addUser()" /> <input id="Button1" type="button" class="cancle_button" value="Cancel" ng-click="show = false; clear()" /> </div>

<button id="add_button" ng-click="show = true;">Add</button> </div>

<script>

var app = angular.module("myApp", ["xeditable"]);

app.controller('Ctrl', function ($scope, $http) { //initial variables $scope.show = false; $scope.newUser_Name = ''; $scope.newUser_Age = ''; $scope.newUser_Nick = ''; $scope.users = []; var data = [];

//---fetch data from storage var storage = localStorage.getItem("data"); data = JSON.parse(storage);

if (data != null) { for (var i = 0; i < data.length; i++) { $scope.inserted = { id: $scope.users.length + 1, name: data[i].name, age: data[i].age, nick: data[i].nick }; $scope.users.push($scope.inserted); } }

$scope.age= [ { value: 1, text: '1' }, { value: 2, text: '2' }, { value: 3, text: '3' }, { value: 4, text: '4' }, { value: 5, text: '5' }, { value: 6, text: '6' }, { value: 7, text: '7' }, { value: 8, text: '8' }, { value: 9, text: '9' }, { value: 10, text: '10' }, { value: 11, text: '11' }, { value: 12, text: '12' }, { value: 13, text: '13' }, { value: 14, text: '14' }, { value: 15, text: '15' }, { value: 16, text: '16' }, { value: 17, text: '17' }, { value: 18, text: '18' }, { value: 19, text: '19' }, { value: 20, text: '20' }, { value: 21, text: '21' }, { value: 22, text: '22' }, { value: 23, text: '23' }, ];

//edit and save age user $scope.saveAgeUser = function (data, index) { $scope.users[index].age = data; //save to storage localStorage.setItem("data", JSON.stringify($scope.users)); }; //edit and save name user $scope.saveNameUser = function (data, index) { $scope.users[index].name = data; //save to storage localStorage.setItem("data", JSON.stringify($scope.users)); }; //edit and save nickname user $scope.saveNickNameUser = function (data, index) { $scope.users[index].nick = data; //save to storage localStorage.setItem("data", JSON.stringify($scope.users)); };

// remove user $scope.removeUser = function (index) { $scope.users.splice(index, 1); //save to storage localStorage.setItem("data", JSON.stringify($scope.users)); };

// cancle to add new user $scope.clear = function () { $scope.newUser_Name = ''; $scope.newUser_Age = ''; $scope.newUser_Nick = ''; };

// add user $scope.addUser = function () { if ($scope.newUser_Name === "" || $scope.newUser_Age === "" || $scope.newUser_Nick === "") { alert("Data is incomplete"); return; } $scope.inserted = { id: $scope.users.length+1, name: $scope.newUser_Name, age: $scope.newUser_Age, nick: $scope.newUser_Nick }; $scope.users.push($scope.inserted); //save to storage localStorage.setItem("data", JSON.stringify($scope.users)); }; }); </script> </body> </html>