Hi Friend if you are fresher read my previous post of angular Js tutorial.
Today you teach Filter & Template.
Today you teach Filter & Template.
Filter in AngularJS
It is used for format data before displaying it to users. Here it can be used in view templates, controllers, services and directives.
AngularJS provides filters to transform data:
It is used for format data before displaying it to users. Here it can be used in view templates, controllers, services and directives.
AngularJS provides filters to transform data:
- Currency: - Format a number to a currency format.
- Date: - Format a date to a specified format.
- Filter: - Select a subset of items from an array.
- Json: - Format an object to a JSON string.
- Limit To: - Limits an array/string, into a specified number of elements/characters.
- Lowercase: - Format a string to lower case.
- Number: - Format a number to a string.
- Order By: - Orders an array by an expression.
- Uppercase: - Format a string to upper case.
<!DOCTYPE html>
<html>
<head>
<title>Filter Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<script>
var members = [
{
username: 'Shiva',
address: 'Delhi',
sallery: '25000',
Designation: 'Software Developer'
}, {
username: 'Rahul',
address: 'Noida',
sallery: '20000',
Designation: 'Software Developer'
}, {
username: 'Kshma',
address: 'Mumbai',
sallery: '26000',
Designation: 'Software Designer'
}, {
username: 'Ashita',
address: 'Varanasi',
sallery: '22000',
Designation: 'Teacher'
}];
var app = angular.module("app", []);
app.controller("ListController",
["$scope", function ($scope) {
$scope.Members = members;
}]);
</script>
<divng-app ="app" ng-controller="ListController">
<h3>Exact or contains filter</h3>
<div>
Filter Username or address or
sallery:
<input type="text" ng-model="mysearch.$" /> Address only:
<input type="text" ng-model="mysearch.address" /> sallery :
<input type="text" ng-model="mysearch.sallery" />
</div>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>UserName</th>
<th>Address</th>
<th>sallery</th>
<th>Designation</th>
</tr>
<trng-repeat ="member in Members |
filter: mysearch:exact">
<td>{{member.username}}</td>
<tdng-bind ="member.address">
</td>
<td>{{member.sallery}}</td>
<td>{{member.Designation}}</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
Output
Template: An angular template can have Directive, HTML markup, CSS, Filters, Expressions and Form controls. Templates are used to display the information from the model and controller that a user sees in his browser.
Types of Templates
Types of Templates
- Static Templates:
A static template is defined by using script tag. It must have an id attribute with a unique value and a type attribute with value text/ng-template.
As:
<script type="text/ng-template" id="person.html">
{{person.name}}: {{person. Address}}
</script>
Here
<divng-include ="'person.html'">
</div>
- Used for rendering.
- Dynamic Templates:
A dynamic template is an html page which is compiled and rendered by Angular on demand.
Ng-include use for rendering in dynamic template.
Let’s start create project,
1. Open old visual studio project
2. Add new html file with name of Template.
<!DOCTYPEhtml>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var members = [
{
username: 'Shiva',
address: 'Delhi'
}, {
username: 'Rahul',
address: 'Mumbai'
}, {
username: 'Kshma',
address: 'Mumbai'
}, {
username: 'Ashita',
address: 'Varanasi'
}];
var app = angular.module('app', []);
app.controller('MemberController', function ($scope) {
$scope.Members = members;
});
</script>
</head>
<body ng-app="app">
<p>AngularJS basic template</p>
<h4>Listing item from the collection</h4>
<divng-controller ="MemberController">
<ul>
<ling-repeat ="member in Members">
{{$index + 1}}. Name: {{member.username }} | Address: {{ member.address}}
</li>
</ul>
</div>
</body>
</html>
Output
No comments:
Post a Comment