Mavengers

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>

Angularjs ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model named name.

<p> Enter Name : <input type="text" ng-model="name"/> </p>