Common Hands-on Sample For AngularJS Developers: Part 1

Pradeep Sahoo
9y
15.4k
0
6

Article

This article gives you some hands-on tricks in AngularJs. In every web application, we use some common functionalities that is frequently used in pages or modules. Let us see what these common requirements are and how to achieve them.

Note: There can be other ways of doing this requirement, I have written this article based on my learning. For visualizing the requirements, I have added the output first and then written the code below.

How to check all checkboxes in a check box list

Consider the scenario where we have a list of check boxes and let us say a user wants to select either one of the checkboxes or they need an option to check all the checkboxes from the list of check boxes.

Code: CheckAllcheckbox.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "ASP.NET"
}, {
Name: "C#"
},
{
Name: "SQL Server"
},
{
Name: "WCF"
},
{
Name: "Angular Js"
},
{
Name: " ASP.NET MVC4"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
</script>
</head>
<body ng-app="CheckAllModule">
<div style="width: 800px; border: 2px solid gray;">
<b>Checking All Items In a check box List</b>
<ul ng-controller="checkboxController">
<li>Check All Skills
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>
<b>Skills </b>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
</div>
</body>
</html>

Code Clarification

Assign some items to the scope and when the user selects, check all of them. This calls the function checkAll(), that does for each loop, iterates through the scope and does the selection.

angular.forEach($scope.Items, function (item)
{
item.Selected = $scope.selectedAll;
}

How to do a Cascading Dropdown in AngularJs

Assume we have a requirement to populate some drop downs on a cascading basis. We have 2 dropdowns, the first one contains a list of countrys or citys and the second drop down contains the country names and city names. Based on the first drop down selection, the second one will be populated and so on.

Code: CascadingDropdown.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
angular.module("app", [])
.controller("myCtrl", function ($scope) {
$scope.County = [
{ CountyName: 'India', countyNumber: '01' },
{ CountyName: 'US', countyNumber: '02' },
{ CountyName: 'UK', countyNumber: '03' }
];
$scope.City = [
{ CityName: 'Mumbai', CityNumber: '01' },
{ CityName: 'Newyork', CityNumber: '02' },
{ CityName: 'London', CityNumber: '03' }
];
$scope.featuretype = [
{ type: 'County', data: $scope.County, displayName: 'CountyName' },
{ type: 'City', data: $scope.City, displayName: 'CityName' }
];
});
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="myCtrl">
Select a Country or City:
<select id="FeatureTypeDropdown" ng-model="option1" ng-options="ft as ft.type for ft in featuretype">
<option value="">Select</option>
</select>
<select id="Select1" ng-model="county" ng-options="c as c[option1.displayName] for c in option1.data">
<option value="">Select</option>
</select>
</div>
</div>
</body>
</html>

Code Clarification

Assigned some items to the scope and filtering the data based on the selection of the first dropdown.

Focussing an input TextBox in AngularJs

In AngularJs, the JavaScript codes are implemented in a different way. In earlier JavaScript, we were doing document.getElementById(“<controlName>).focus() or in jQuery $(“<IdOfthecontrol>”).focus().

Now, let us see how to write this.

Code: FocusingInput-2.html

<!doctype html><html ng-app="sampleapp"><head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script><script>
var myapp = angular.module('sampleapp', []);
myapp.controller('samplecontoller', function ($scope) {
});
angular.module('sampleapp').directive('focus',
function ($timeout) {
return {
scope: {
trigger: '@focus'
},
link: function (scope, element) {
scope.$watch('trigger', function (value) {
if (value === "true") {
$timeout(function () {
element[0].focus();
});
}
});
}
};
}
);
</script></head><body><div ng-controller="samplecontoller" style="border: 2px solid gray; width: 500px;">
<h1>Focusing The Textbox : </h1>
<b>With Out Focus :</b><input type="text">
<br><br><b>With Focus : </b>
<input type="text" focus="true">
<br><br></div>
</body>
</html>

Code Clarification

Written a custom directive named "focus" and called it with the TextBox that wanted to focus.
<input type="text" focus="true">

* Rating in a web page in AngularJs

Many of us know that web pages have rating or voting options. Let us see how to do this.

Code StarRating.html

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>Stare Rating for a Review</title>
<style type="text/css">
.rating{
color: red;
margin: 0;
padding: 0;
}
ul.rating {
display: inline-block;
}
.rating li {
list-style-type: none;
display: inline-block;
padding: 1px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.rating .filled {
color: #21568b;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('RatingCtrl', function ($scope) {
$scope.rating = 5;
$scope.rateFunction = function (rating) {
alert('Rating selected - ' + rating);
};
})
.directive('starRating',
function () {
return {
restrict: 'A',
template: '
<ul class="rating">'
+ '
<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">'
+ '\u2605'
+ '</li>'
+ '
</ul>',
scope: {
ratingValue: '=',
max: '=',
onRatingSelected: '&'
},
link: function (scope, elem, attrs) {
var updateStars = function () {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({
filled: i < scope.ratingValue
});
}
};
scope.toggle = function (index) {
scope.ratingValue = index + 1;
scope.onRatingSelected({
rating: index + 1
});
};
scope.$watch('ratingValue',
function (oldVal, newVal) {
if (newVal) {
updateStars();
}
}
);
}
};
}
);
</script>
</head>
<body ng-app="app" ng-controller="RatingCtrl">
<h3>Rating</h3>
<div ng-init="rating = star.rating + 1"></div>
<div class="star-rating" star-rating rating-value="rating" data-max="5" on-rating-selected="rateFunction(rating)"></div>
</body>
</html>

Code Clarification

Written a custom directive named "starRating" and called it for a div . Also, incremented or decremented the rating based on the user selection.

Open a Dialog on click of a Button in AngularJs

In many requirements, we have come across a situation that we wanted to show a dialog box in the page. Now, let us do it in AngularJs.

Code openaDialogandfocus.html

<!doctype html><html ng-app="app">
<head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
</script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js">
</script><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script>
var app = angular.module('app', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope) {
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.close = function () {
$scope.closeMsg = 'I was closed at: ' + new Date();
$scope.shouldBeOpen = false;
};
};
app.directive('focusMe', function ($timeout, $parse) {
return {
link: function (scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function (value) {
console.log('value=', value);
if (value === true) {
$timeout(function () {
element[0].focus();
});
}
});
element.bind('blur', function () {
console.log('blur')
scope.$apply(model.assign(scope, false));
})
}
};
});
</script></head><body><div ng-controller="ModalDemoCtrl">
<button class="btn" ng-click="open()">Click Here to Login</button>
<div modal="shouldBeOpen" close="close()">
<div class="modal-header">
<h4>Log In</h4></div><div class="modal-body">
<b>UserName: </b><input type="text" focus-me="shouldBeOpen">
<br /><b>Password :</b><input type="text" />
</div><div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Log In</button>
</div></div></div>
</body>
</html>

Code Clarification

This is a simple code that opens a dialog on the click of a button.

How to write Switch Case in AngularJs

Let us see an example to write a switch case in AngularJs.

Code: switchcase.html

<!DOCTYPE html>
<html>
<head>
<title>Switch Case in AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript">
(function (angular) {
angular.module('modSwitch', [])
.controller('ControllerSwitch', ['$scope', function ($scope) {
$scope.options = ['ICCWC', 'ICCT20', 'IPL', 'CLT'];
$scope.selection = $scope.options[0];
}]);
})(window.angular);
</script>
</head>
<body ng-app="modSwitch">
<div ng-controller="ControllerSwitch">
<select ng-model="selection" ng-options="item for item in options"></select>
<hr />
<div ng-switch on="selection">
<div ng-switch-when="ICCWC">ICCWC Stands For ICC world cup .</div>
<div ng-switch-when="ICCT20">ICCT20 stands for 20-20 world cup.</div>
<div ng-switch-when="IPL">IPL stands for Indian Premiur League.</div>
<div ng-switch-when="CLT">CLT Stands for Champions League trophy</div>
</div>
</div>
</body>
</html>

Code Clarification

We have a dropdown with some options and based on the selection we need to pass the model as the selection object and show it.

div ng-switch on="selection">
<div ng-switch-when="ICCWC">ICCWC Stands For ICC world cup </div>

Allowing user to enter only numeric character in AngularJs

FocusingInput-2.html

<!DOCTYPE html>
<html ng-app="myapp"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
var $scope;
var app = angular.module('myapp', []);
app.controller('Ctrl', function ($scope) {
$scope.wks = { number: 1, validity: true }
});
app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope) {
scope.$watch('wks.number', function (newValue, oldValue) {
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
scope.wks.number = oldValue;
}
});
}
};
});
</script>
</head>
<body ng-app="myapp">
<form ng-app="myapp" name="myform" novalidate>
<div ng-controller="Ctrl">
<input name="number" is-number ng-model="wks.number">
<span ng-show="!wks.validity">Value is invalid</span>
</div>
</form>
</body>
</html>

Code Clarification

Created a custom directive named 'isNumber' and assigned it to the TextBox.

Showing number of characters left in a multiline TextBox in AngularJs

FocusingInput-2.html

<!DOCTYPE html>
<html ng-app="myapp"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
var $scope;
var app = angular.module('myapp', []);
app.controller('Ctrl', function ($scope) {
$scope.wks = { number: 1, validity: true }
});
app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope) {
scope.$watch('wks.number', function (newValue, oldValue) {
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
scope.wks.number = oldValue;
}
});
}
};
});
</script>
</head>
<body ng-app="myapp">
<form ng-app="myapp" name="myform" novalidate>
<div ng-controller="Ctrl"></div>
<textarea ng-model="test" ng-trim="false" maxlength="100"></textarea>
<span>{{100 - test.length}} left</span>
</form>
</body>
</html>

Code Clarification

Created text areas that subtract the model left from the max length and show it.

Showing Data in Treeview Manner in AngularJs

In one of my pages in the project, we wanted to show a data such as treeview. Here is the demonstration.

Code: Index.html

<!DOCTYPE html>
<html ng-app="treeview">
<head>
<meta charset="utf-8">
<title>Example to Create Treeview using AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script>
angular.module('treeview', [])
.directive('ngTree', function () {
return {
restrict: 'E',
transclude: true,
controller: function ($scope) {
$scope.showStates = function (item) {
item.active = !item.active;
};
$scope.items = [
{
country: "INDIA",
states: [
{ state: "Delhi" },
{ state: "Mumbai" },
{ state: "bangalore" },
{ state: "Chennai" },
{ state: "Kolkata" }
]
},
{
country: "UNITED STATES",
states: [
{ state: "Alabama" },
{ state: "California" },
{ state: "Hawaii" },
{ state: "Michigan" },
{ state: "New York" },
{ state: "Washington" }
]
}
];
},
templateUrl: 'treeview.html'
};
});
</script>
</head>
<body>
<div style="width:500px ;border:1px solid gray;">
<b>Treeview structure Data in Angular Js</b>
<ng-tree></ng-tree>
</div>
</body>
</html>

Treeview.html

<ul>
<li ng-repeat="item in items" ng-click="showStates(item)">
<span>{{item.country}}</span>
<ul>
<li ng-repeat="subItem in item.states" ng-show="item.active">
<span>{{subItem.state}}</span>
</li>
</ul>
</li>
</ul>
Code Clarification:
Created a custom directive named 'ngTree'and assigned it to the div as
<div style="width:500px ;border:1px solid gray;">
<b>Treeview structure Data in Angular Js</b>
<ng-tree></ng-tree>
</div>

How to show data in Jqgrid in AngularJs

The most common requirement for any project is showing the data in a tabular fashion such as grid. Here is a sample to show the data in a jqgrid. Jqgrid is a powerful grid in terms of performance and functionality.

Code: JqgriddataBinding.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link data-require="jqgrid@*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
<script data-require="jqgrid@*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
<style type="text/css"></style>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('ngJqGrid', function () {
return {
restrict: 'E',
scope: {
config: '=',
data: '=',
},
link: function (scope, element, attrs) {
var table;
scope.$watch('config', function (newValue) {
element.children().empty();
table = angular.element('
<table></table>');
element.append(table);
$(table).jqGrid(newValue);
});
scope.$watch('data', function (newValue, oldValue) {
var i;
for (i = oldValue.length - 1; i >= 0; i--) {
$(table).jqGrid('delRowData', i);
}
for (i = 0; i < newValue.length; i++) {
$(table).jqGrid('addRowData', i, newValue[i]);
}
});
}
};
});
myApp.controller('MyController', function ($scope) {
$scope.config = {
datatype: "local",
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
multiselect: true,
caption: "Binding A test data to JQgrid in Angular JS"
};
$scope.data = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
</html>

Code Clarification

Created a custom directive named "ng-jq-grid" and assigned data to the scope in JSON format. In the link function, we are binding the following.

link: function(scope, element, attrs)
{
var table;
scope.$watch('config', function(newValue)
{
element.children().empty();
table = angular.element('<table></table>');
element.append(table);
$(table).jqGrid(newValue);
});
}

We have now completed with 10 hands-on examples that are commonly used in any project.

In the next article, I will continue with the next 10 set of hands-on Tricks. I hope these hands-on samples will be useful. Thanks for reading!

Up Next

Ebook Download

View all

Hands-On With AngularJS Using ASP.NET

Read by 6.3k people

Download Now!

Learn

View all