Mavengers

AngularJs ng-disabled Directive

Add ng-disabled attribute to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

<html>
<title> AngularJs Directives </title>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>

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

<table>
<tr>

<td>
<input type="checkbox" ng-model="enableDisableButton">Disable Button
</td>

<td>
<button ng-disabled="enableDisableButton">Click Me</button>
</td>

</tr>

</table>

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

</body>
</html>

AngularJs tables with ne-repeat

<html>
<title> AngularJs Directives </title>
<head>
<title>Angular JS Table</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>

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

<table>
<tr>
<th>
Name
</th>
<th>
Marks
</th>
</tr>
<tr ng-repeat="item in data.subject">

<td>
{{ item.name}}
</td>

<td>
{{ item.marks }}
</td>

</tr>

</table>

</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',
subject:[{name:'Physics',marks:'40' },{name:'Chemistry',marks:'50' },{name:'Math',marks:'60' },{name:'Biology',marks:'70' }],
fees:'100',
fullname: function()
{
var name=$scope.data;
return name.firstname + ' ' + name.lastname;
}
};
}

</script>

</body>
</html>

AngularJs Orderby Filter

<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 | orderBy : 'marks'">

{{ item.Subject + ' marks:' + 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 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>