<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script type="text/javascript">
function load() {
var doc = new jsPDF();
doc.setFontSize(12);
doc.text(35, 25, "Welcome to JsPDF");
doc.autoPrint();
var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
};
</script>
</head>
<body >
<input onclick="load()" type="button" value="click" />
</body>
</html>
Monday, June 29, 2015
jsPdf Print without browser history
Sunday, June 28, 2015
Bootstrap list group example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
angular.module('app', []);
angular.module('app').controller("MainController", function () {
var vm = this;
vm.title = 'AngularJS List Group Example';
vm.searchInput = '';
vm.shows = [
{
title: 'title 1',
year: 2001,
favorite: true
},
{
title: 'title 2',
year: 2002,
favorite: false
},
{
title: 'title 3',
year: 2003,
favorite: true
},
{
title: 'title 4',
year: 2014,
favorite: true
},
{
title: 'title 5',
year: 2005,
favorite: false
}
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.title}}</h1>
<h3>A list of TV shows</h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
</ul>
</div>
</body>
</html>
Bootstrap Login Responsive Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Responsive Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
@*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">*@
@*<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>*@
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-border">
<h2>Login Form</h2>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-primary">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
</body>
</html>
Saturday, June 27, 2015
ng Grid Change cell Color
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
.red {
background-color: red;
color: white;
}
.green {
background-color: green;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Name1", age: 1 },
{ name: "Name2", age: 2 },
{ name: "Name3", age: 3 },
{ name: "Name4", age: 4 },
{ name: "Name5", age: 5 }];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name'
}, {
field: 'age',
displayName: 'Age',
cellTemplate: '<div class="ngCellText" ng-class="{\'green\' : row.getProperty(\'age\') == \'5\' }">{{ row.getProperty(col.field) }}</div>'
}]
};
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Simple ng Grid
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Name1", age: 1 },
{ name: "Name2", age: 2 },
{ name: "Name3", age: 3 },
{ name: "Name4", age: 4 },
{ name: "Name5", age: 5 }];
$scope.gridOptions = { data: 'myData' };
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Thursday, June 25, 2015
AngularJS and Twitter Bootstrap and search glyphicon
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
angular.module("simpleapp", [])
.controller("SimpleController", function ($scope) {
$scope.entity = {};
$scope.entity.title = "A simple AngularJS app";
});
</script>
<body ng-app="simpleapp">
<div ng-controller="SimpleController">
<h2>Hello, {{entity.title}}</h2>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
</body>
</html>
Tuesday, June 23, 2015
A simple AngularJS app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="simpleapp">
<div ng-controller="SimpleController">
<h2>Hello, {{entity.title}}</h2>
</div>
<script>
angular.module("simpleapp", [])
.controller("SimpleController", function($scope) {
$scope.entity = {};
$scope.entity.title = "A simple AngularJS app";
} );
</script>
</body>
</html>
Sunday, June 21, 2015
Angular Js $index, $odd and $even with ng-if directive
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
{{$index + 1 }}
</td>
<td ng-if="$even">
{{ $index + 1 }}
</td>
<td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
{{ x.Name }}
</td>
<td ng-if="$even">
{{ x.Name }}
</td>
<td ng-if="$odd" style="background-color:#a1a1a1; color:#ffffff">
{{ x.Country }}
</td>
<td ng-if="$even">
{{ x.Country }}
</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', [])
.factory('customersService', function ($http, $q) {
var deferred = $q.defer();
return {
getPerson: function () {
return $http.get("/api/Home/getperson")
.then(function (response) {
// promise is fulfilled
deferred.resolve(response);
return deferred.promise;
}, function (response) {
deferred.reject(response);
return deferred.promise;
})
;
}
}
})
.controller("customersCtrl", function ($scope, $q, customersService) {
customersService.getPerson().then(
function (result) {
$scope.names = result.data;
},
function (error) {
// handle errors here
alert('error');
}
);
});
</script>
</body>
</html>
Tuesday, June 16, 2015
Angular Js Factory and $q
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.factory('customersService', function ($http, $q) {
var deferred = $q.defer();
return {
getPerson: function () {
return $http.get("/api/Home/getperson")
.then(function (response) {
// promise is fulfilled
deferred.resolve(response);
return deferred.promise;
}, function (response) {
deferred.reject(response);
return deferred.promise;
})
;
}
}
})
.controller("customersCtrl", function ($scope, $q, customersService) {
customersService.getPerson().then(
function (result) {
$scope.names = result.data;
},
function (error) {
// handle errors here
alert('error');
}
);
});
</script>
</body>
</html>
Friday, June 12, 2015
Retrieve Data in Angular Js from Web Api as HttpResponseMessage
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("/api/Home/getperson").success(function (data) {
alert(JSON.stringify(data));
$scope.names = data;
});
});
</script>
</body>
</html>
public class records
{
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
public class HomeController : ApiController
{
public HttpResponseMessage getperson()
{
var data = new List();
records item1 = new records();
item1.Name = "Name1";
item1.City = "City1";
item1.Country = "Country1";
data.Add(item1);
records item2 = new records();
item2.Name = "Name2";
item2.City = "City2";
item2.Country = "Country2";
data.Add(item2);
records item3 = new records();
item3.Name = "Name3";
item3.City = "City3";
item3.Country = "Country3";
data.Add(item3);
return Request.CreateResponse(HttpStatusCode.OK, data);
}
}
Thursday, June 11, 2015
Angular Js Upper Case And Lower Case
<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script type="text/javascript">
angular.module('myApp', []).controller('personCtrl', function ($scope) {
$scope.firstName = "jobin";
$scope.lastName = "jonny";
});
</script>
</body>
</html>
Subscribe to:
Posts (Atom)