Mavengers

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;
}
};
});

AngularJs Application Module

Here is a file named mainApp.js that contains the following code:

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

Here, we declare an application mainApp module using angular.module function and pass an empty array to it. This array generally contains dependent modules.

AngularJs Modules

AngularJS supports modular approach. Modules are used to separate logic such as services, controllers, application etc. from the code and maintain the code clean. We define modules in separate js files and name them as per the module.js file. In the following example, we are going to create two modules:

 Application Module - used to initialize an application with controller(s).

 Controller Module - used to define the controller.

AngularJs show hide toggle on checkbox click

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

<table>
<tr>

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

<td>
<button ng-show="showHide1">Show</button>
</td>

<td>
<button ng-hide="showHide1">Hide</button>
</td>
</tr>

</table>

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

</body>
</html>