Mavengers

Wednesday, April 22, 2015

angularjs link ng href table

Tuesday, April 21, 2015

AngularJs check validation required

<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="myApp">

<div ng-controller="studentController">

<form name="studentForm" novalidate>

<input name="firstname" type="text" ng-model="firstname" required>

<span style="color:red;" ng-show="studentForm.firstname.$error.required"> First Name Is required</span>

<input name="lastname" type="text" ng-model="lastname" required>

<input name="email" type="email" ng-model="email" required>

<button ng-click="reset()">Reset</button>

</form>

</div>

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

////////////////Main.js///////////////////

var myApp=angular.module("myApp",[]);

////////////studentController//////////

myApp.controller("studentController",function($scope)

{

$scope.reset=function()

{

$scope.firstname='Shekhar',

$scope.lastname='Nawale',

$scope.email='nawale.shekhar1@gmail.com'

};

$scope.reset();

});

AngularJs Validate Data

The following can be used to track error.

 $dirty - states that value has been changed.

 $invalid- states that value entered is invalid.

 $error- states the exact error.

AngularJs ng-click

Reset data of a form using on-click directive of a button.

/////////HTML/////////////

<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="myApp">

<div ng-controller="studentController">

<input name="firstname" type="text" ng-model="firstName" required>

<input name="lastname" type="text" ng-model="lastName" required>

<input name="email" type="email" ng-model="email" required>

<button ng-click="reset()">Reset</button>

</div>

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

///////////////////studentController////////////////

myApp.controller("studentController",function($scope)
{
$scope.reset=function()
{
$scope.firstName='Shekhar',
$scope.lastName='Nawale',
$scope.email='nawale.shekhar1@gmail.com'
};

});

////////Main.js//////////////

var myApp=angular.module("myApp",[]);

AngularJs events

AngularJS provides multiple events associated with the HTML controls.
For example, ng-click directive is generally associated with a button. AngularJS supports the following events:

 ng-click

 ng-dbl-click

 ng-mousedown

 ng-mouseup

 ng-mouseenter

 ng-mouseleave

 ng-mousemove

 ng-mouseover

 ng-keydown

 ng-keyup

 ng-keypress

 ng-change

AngularJs example with modules

//////////////////////HTML//////////////////////////////////////

<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="myApp">

<div ng-controller="studentController">

{{data.firstname + ' ' + data.lastname }}

<li ng-repeat="item in data.subject">

{{item.name + ' - ' + item.marks}}
<li>

</div>

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

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

var myApp=angular.module("myApp",[]);

///////////////////////////////Controller.js///////////////////////////

myApp.controller("studentController",function($scope)

{

$scope.data={

firstname:'Shekhar',

lastname:'Nawale',

subject:[{name:'Physics',marks:'40'},{name:'Math',marks:'45'},{name:'Che',marks:'70'},{name:'Bio',marks:'50'}]

};

});

AngularJs Controller Module

mainApp.controller("studentController", function($scope) {

$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67} 11. MODULES
Angular JS Tutorial
40
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});