Angular JS: January 2016

Thursday, 21 January 2016

Show/hide content on click of Tab

<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" ></script>
<script src="script.js"></script>

<style>
li {
float: left;
background-color: rgb(200,200,200);
padding: 5px 19px;
margin: 5px 2px 5px 0px;
color: black;
list-style: none;
}
li a {
text-decoration: none;
font-size: 21px;
font-style: italic;
}
.active{
background:#cc00cc;
}
</style>
</head>
<body>
<section ng-controller="mainCtrl">
<ul>
<li ng-class="{active:tab===1}">
<a href ng-click="tab = tab==1 ? a : 1">Tab1</a>
</li>
<li ng-class="{active:tab===2}">
<a href ng-click="tab = tab==2 ? a : 2">Tab2</a>
</li>
<li ng-class="{active:tab===3}">
<a href ng-click="tab = tab==3 ? a : 3">Tab3</a>
</li>
<br><br>
<p ng-show="tab === 1"> Tab1 content </p>
<p ng-show="tab === 2"> Tab2 content</p>
<p ng-show="tab === 3"> Tab3 content</p>
</ul>
</section>
</body>
</html>

In JS-->

function mainCtrl($scope) {

$scope.tab = 2;

}

Wednesday, 13 January 2016

Steps to create simple angular js app

steps to create angular js app

git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>
npm install
npm start
http://localhost:8000/app/index.html
npm test // to test
--* FIRST 5 STEPS ARE OK TO START APP DEMO *--
npm run test-single-run
npm run update-webdriver
npm run protractor
npm update
bower update
npm run update-index-async

imp link https://github.com/angular/angular-seed

Tuesday, 12 January 2016

Sorting data using Dropdown click

----------------- html --------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Sort and Filter</title>
<style>
body { padding-top:50px; }
</style>


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

</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">

Sort by:
<select ng-model="sortDrop">
<option value="fish">By fish</option>
<option value="-date">By Date</option>
<option value="name">By Name</option>
</select>

<table class="table table-bordered table-striped">
<tbody>
<tr>
<th>Name</th>
<th>fish</th>
<th>Date</th>
</tr>
<tr ng-repeat="roll in sushi | orderBy:sortDrop">
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.date }}</td>
</tr>
</tbody>
</table>

</div>
</body>
</html>

---------------------- Javascript -----------------

angular.module('sortApp', [])

.controller('mainController', function($scope) {

$scope.sortDrop = 'name';

$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', date: new Date(1288323623006) },
{ name: 'Philly', fish: 'Tuna', date: new Date(1450423640000) },
{ name: 'Tiger', fish: 'Eel', date: new Date(12345678000) },
{ name: 'Adi Roll', fish: 'Crab', date: new Date(1450071527000) },
{ name: 'Rainbow', fish: 'Variety', date: new Date(12375678000) }
];

});

Sunday, 10 January 2016

In built filters in angular js

------------------------- In Built Filters -----------------------

> uppercase
> lowercase
> filter
> limitTo
> date
> orderBy

Friday, 8 January 2016

Date format Using Custom filter

------------------------ JS file -----------------------

var app = angular.module('dateFilter', []);

app.controller('MainCtrl', function($scope, $filter) {

$scope.dt = '2014-08-03T12:38:42.744Z';

});

app.filter('dateSuffix', function($filter) {

var suffixes = ["th", "st", "nd", "rd"];

return function(input) {

var dtfilter = $filter('date')(input, 'MMMM dd yyyy');

var data=dtfilter.split(" ");

var finaldate="";

if(data){

var month=data[0];

var day=data[1];

var year=data[2];

var relevantDigits = (day < 30) ? day % 20 : day % 30;

var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];

finaldate=month+" "+day+suffix+", "+year;

}

return finaldate;

};

});

-------------------------- html ---------------------------
<html ng-app="dateFilter">

<head>
<meta charset="utf-8" />
<title>AngularJS Date Filter</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<input ng-model="dt">
<p id="summaryHeader">Calendar of {{dt|dateSuffix}}</p>

</body>

</html>