Here is a simple project for update a html table with user inputs
You need to have a basic understanding about Angular directives, controllers, modules, and scopes to understand this example.
<!DOCTYPE html>
<html ng-app="app" >
<head>
<title>Ajax With Angular</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
th{
background: lightgray;
}
</style>
</head> <body ng-controller="myController">
<h2>Registered people</h2>
<label>Enter names:</label>
<input type="text" name="inputData" ng-model="inputData"/>
<input type="button" ng-click="addData()" value="Add data"/>
<table ng-show="display" border="1px">
<tr>
<th>Names</th>
</tr>
<tr ng-repeat="data in scopeData">
<td>{{data}}</td>
<td><input type="button" value="Remove" ng-click="removeData(data)"/></td>
</tr>
</table>
<script src = "angular.min.js"></script>
<script>
app=angular.module('app',[]);
app.controller('myController',function($scope){
$scope.scopeData=[];
$scope.display=false;
$scope.addData = function(){
$scope.scopeData.push($scope.inputData);
$scope.inputData="";
$scope.display=true;
}
$scope.removeData = function(data){
$scope.scopeData.splice($scope.scopeData.indexOf(data),1)
if($scope.scopeData.length==0){
$scope.display=false;
}
}
});
</script>
</body>
</html>
This simple application ask for user inputs and display them in a table. If there are no records to display it won't even display the table.
Lets see what are the angular features used in this example and why used them.
- One module ( "app") and a controller ("myController") is used.
- There are 5 resources attached with the scope of controller (myController)
- scopeData - an array of names
- display - boolean variable to decide whether display the table or not
- inputData - A variable get the user input from textbox
- addData - A function to add data to "scopeData" array
- removeData - A function to remove data from "scopeData" array
- There are 5 angular directives used in here
- ng-app - To load an angular module ( more details)
- ng-controller - To give the control of the body element to scope of "myController"
- ng-model - To bind the input from text box with the model "inputData"
- ng-show - To display the table according to variable "display"
- ng-click - To execute methods "addData" and "removeData" in the current scope.
No comments:
Post a Comment