Mavengers

AngularJs filter data by user input

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

Enter subject: <input type="text" ng-model="Subject">

<ol>
<li ng-repeat="item in data | filter : Subject">

{{ item.Subject + ' ' + item.marks }}

</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data=[
{
Subject:'English',marks:'40'
},
{
Subject:'Math',marks:'50'
},
{
Subject:'History',marks:'60'
},
{
Subject:'chemistry',marks:'70'
},
{
Subject:'Biology',marks:'45'
}
];
}

</script>

</body>
</html>

AngularJs Currency Filter

This adds currency filter to an expression that returns a number. Here, we add currency filter to print fees using currency format.

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

<ol>

{{ data.fee | currency}}

</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data={
fee:'100'
};
}

</script>

</body>
</html>

AngularJs Lowercase Filter

This adds lowercase filter to an expression using pipe character. Here, we add lowercase filter to print student name in small letters.

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

<ol>

{{ data.fullName() | lowercase}}

</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data={
firstname:'shekhar',
lastname:'nawale',
fullName:function()
{
var studentObject;
studentObject=$scope.data;
return studentObject.firstname + " " +studentObject.lastname;

}

};
}

</script>

</body>
</html>

AngularJs Uppercase Filter

This adds uppercase filter to an expression using pipe character. Here, we add uppercase filter to print student name in capital letters.

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

<ol>

{{ data.fullName() | uppercase}}

</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data={
firstname:'shekhar',
lastname:'nawale',
fullName:function()
{
var studentObject;
studentObject=$scope.data;
return studentObject.firstname + " " +studentObject.lastname;

}

};
}

</script>

</body>
</html>

Angularjs use javascript file for controlller and write function

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

<ol>

{{ 'firstname: ' + data.firstname + ', lastname: ' + data.lastname }}
{{ data.fullName() }}

</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script src="main.js">

</script>

</body>
</html>

////////////////////////main.js///////////////////////

function firstController($scope)

{

$scope.data={

firstname:'shekhar',

lastname:'nawale',

fullName:function()

{

var studentObject;

studentObject=$scope.data;

return studentObject.firstname + " " +studentObject.lastname;

}

};

}

angularjs use of ng-repeat loop

<html>
<title> AngularJs Directives </title>

<body>

<div ng-app="" ng-controller="firstController">

<p>List of Countries with locale:</p>
<ol>
{{ data }}
<li ng-repeat="item in data">

{{ 'firstname: ' + item.firstname + ', lastname: ' + item.lastname }}

</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>

function firstController($scope)
{

$scope.data=[
{
firstname:'shekhar',
lastname:'nawale'
},
{
firstname:'prashant',
lastname:'adpawar'
},
{
firstname:'abhishek',
lastname:'tripathi'
},
]

}

</script>

</body>
</html>

AngularJs ng-repeat directive

ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of countries.

<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>