Angularjs bootstrap tabs example

Based on Angular material  I make a example for Angular Tabs with responsive

Angular material define <md-tabs><md-tabs> for tabs container,

<md-tab>...</md-tab> for Tab.

  
Angular Tabs image
 

Full html struct example as following:

Angularjs select option with image

Angularjs select option with image

 

How to create these select?

How to use ng-paste and ng-cut?

- ng-cut is specify custom behavior on cut event.

How to apply ng-cut?

 <input ng-cut="cut=true" ng-init="cut=false; value='please cut me'" ng-model="value">  
     You just cut it: {{cut}}  

- ng-paste is specify custom behavior on paste event.

How to apply ng-paste?

  <input ng-paste="paste=true" ng-init="paste=false" placeholder='please paste here'>  
     pasted: {{paste}}  

Full code for this example as below:

ng-copy example

ng-copy is specify custom behavior on copy event.
Read more at AngularJs doc

Please run below code to learn.

angularjs a directive example

The a directive of angularjs is modifed form the html A tag so that the default action is prevented when the href attribute is empty.
You can refer direct AngularJs doc for this to know more. In this post i just want to make a example to help you learn easy.

Angularjs format input number when typing example

In this example i will show how to make format input number when typing in angularjs, we will use ng-changed event to do that. Of course you also use other way to do that.
Our goal:
Input : 100 => change to 100
Input : 1000 => change to 1,000
Input : 10000 => change to 10,000
Input : 100000 => change to 100,000
.....
And
Input : 100000.450 => change to 100,000.450

I hope that after got this example you can customize and make a common function related it.

Full code here

How to get total days of a month of a year.

How to get total days of a month of a year via angularjs.

 $scope.month = 10;  
 $scope.year = 2015;  
 // Get total days of Oct 2015  
 $scope.totalDays = new Date($scope.year, $scope.month, 0).getDate();  

totalDays = 31;

Multi select listbox with dynamid ng-selected values

Multi select listbox with dynamid ng-selected values

 Example: we have two arrays: categories array is a list of categories and selectedcategories is a list selected categories by id. We want to use <select > to display all categories via multi selected categories which matching selectedcategories array values.

Output sample:

Here is full code 

Angularjs table sorting filter and paging

Angularjs table sorting, filter and paging

This post provides an example about how create a table via sorting, filter and paging. Following directives and services in angularjs will be used:

• orderby
• filter
• ng-click
• ng-model
• ng-repeat

Angularjs table via sorting and filter on columns example

Angularjs table example

 This post provides an example about how create a table via sort and filter features.
Following directives and services in angularjs will be used:

• orderby
• filter
• ng-click
• ng-model
• ng-repeat
• ng-init

Angularjs ng-pattern example

Angularjs input pattern example

This example is using ng-pattern for Number, Text only and Date type.  
Please follow this code to know how to apply ng-pattern. If you try to input incorrect data the form will be invalid and text on it changes to RED.

ng-class if example

How to apply  ng-class if

This example provides two ways using ng-class if expression.
Following directives and services in angularjs will be used:

• ng-classs
• ng-model
• ng-repeat

Tutorial 32 - Angularjs MVC RESTful Web Service example

 Angularjs MVC RESTful Web Service example

This example shows how to create a simply web application using angularjs, mvc, RESTful Web Service and ORM Entity Framework, I named it is “manage customer”.


List of features:

•     List customer
•     Edit customer
•     Create new customer
•     Delete customer

List of projects of “manage customer” application:

1.     CustomerEntities (Entity Framework 6.0.0.0)
2.     CustomerDAL (c# class library)
3.     CustomerBLL (c# class library)
4.     CustomerAPI (RESTful web service)
5.     CustomerUI (AngularJs, MVC)

Notes that in customer UI will be no C# controller file, it is be replaced by angularjs script file. CustomerAPI will works with CustomerBLL to controll business logic, CustomerBLL reference data layer (CustomerDAL) and CustomerDAL works CustomerEntities to query data.
OK now we focus step by step to know it.

Step 1: Create database for “manage customer” application

Tutorial 30 - AngularJS works via Bootstrap example

AngularJS works via Bootstrap example

This example will help you know about using Bootstrap in AngularJS page. Ok the same with HTML page, to use Bootstrap you must refer to css library of Bootstrap

Of course you must refer AngularJS also:

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  

Following directives will be used in this example.

• ng-controller
• ng-submit
• ng-pattern
• ng-model
• ng-trim
• ng-minlength
• ng-maxlength
• required

and use class="col-md-4" in Bootstrap

Tutorial 29 - AngularJS form example

AngularJS form example

form is a directive in module ng of angularjs to for detail about definition of please refer direct AngularJs doc for this to know more. In this post i just want to make a example to help you learn easy.

This sample will guild you know how to build a form in angularjs. Following directives will be used in this sample.

• ng-controller
• ng-submit
• ng-pattern
• ng-model
• ng-trim
• ng-minlength
• ng-maxlength
• required

Please following this sample code and change something on it to known more.

Tutorial 27 - Angularjs combobox example

Angularjs combobox example

This sample will help you know about using combobox via AngularJS. Ok we will answer two questions blow:

How to binding data to combobox?
How to get seclected value of combobox?

Tutorial 26 - AngularJS table example

AngularJS table example

This tutorial guides you how to apply angularjs to <table>, following directive will be used in this sample:

• ng-init
• ng-repeat
• ng-class-odd

I hope that after run this sample code you will can anwser the question “Why choose AngularJS?”

Tutorial 25 - Validation in angularjs.

Validation in angularjs.
AngularJS providers more attributes to help programer can validate form and controls in form easy. A form is valid when all of control in it to be valid.
The first we need to know about below property of angularjs:

$dirty: It means that user has interacted with the field.
$valid: It means that the field content is valid.
$invalid:  It means that the field content is invalid.
$pristine:  It means that user has not interacted with the field yet.

Ok follow this sample.

Tutorial 24 - AngularJS Global API

Hơ to use AngularJS Global API

 This tutorial provides samples to help you know how to use following common API: angular.isString(),angular.isNumber(),angular.lowercase() and angular.uppercase().

•    How to use angular.isString().
This sample will help you know about using angular.isString() in AngularJS

Tutorial 23 - AngularJS format and filtering?

AngularJS format and filtering

The sample show how to filter data in angularjs, filtering with currency format example.