Hi,
I was creating one simple form and code in Angular.js. It was my first day of working with Angular.js. Following is the code to start with
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular Forms</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
</head>
<body>
<!--ng-init="fname='Ritesh'"-->
<div ng-app="app" ng-init="quantity=2;price=450;person={code:'15645',name:'Ritesh Tandon'}" ng-controller="personController">
<p>First Name<input type="text" placeholder="Enter First Name" ng-model="fname" /></p>
<p>Last Name<input type="text" placeholder="Enter Last Name" ng-model="lname" /></p>
<p>Quantity<input type="text" ng-model="quantity" ng-bind="quantity" placeholder="Quantity" /></p>
<p>Price<input type="text" ng-model="price" ng-bind="price" placeholder="Price" /></p>
<p><label ng-bind="fname"></p>
<p><label ng-bind="(quantity*price) | currency"></p>
<p>{{ fname+ " "+lname }}</p>
<p>{{ person.code+":"+person.name }}</p>
<p>Search Candidate<input type="text" ng-model="search" /></p>
<p>
<ul>
<!-- | filter:'Amit' -->
<li ng-repeat="x in names | filter:search | orderBy:'Name'"">
{{ (x.Name | uppercase) + " lives in " + (x.Country | lowercase)}}
</li>
</ul>
</p>
<p><label ng-show="aTerms">You have agreed to the terms and conditions.</label></p>
<p><input type="button" ng-click="show()" value="Submit Form" ng-disabled="!aTerms" /></p>
<p><input type="checkbox" ng-model="aTerms" />Terms & Conditions</p>
</div>
<script>
/*Pre Render*/
(function (angular) {
function personController($scope,$http) {
$scope.fname = "Michael";
$scope.lname = "Clark";
$scope.show = function () { alert('Thanks for submitting the form. We will contact you soon');}
//$scope.names = [{ name: 'Ritesh', country: 'India' }, { name: 'Amit', country: 'UK' }, { name: 'Shalini', country: 'US' }]
$http.get("http://www.w3schools.com/website/Customers_JSON.php").success(function (response) { $scope.names = response });
};
angular.module("app", []).controller("personController", ['$scope','$http', personController]);
})(angular);
</script>
</body>
</html>
Thanks
Ritesh
I was creating one simple form and code in Angular.js. It was my first day of working with Angular.js. Following is the code to start with
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular Forms</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
</head>
<body>
<!--ng-init="fname='Ritesh'"-->
<div ng-app="app" ng-init="quantity=2;price=450;person={code:'15645',name:'Ritesh Tandon'}" ng-controller="personController">
<p>First Name<input type="text" placeholder="Enter First Name" ng-model="fname" /></p>
<p>Last Name<input type="text" placeholder="Enter Last Name" ng-model="lname" /></p>
<p>Quantity<input type="text" ng-model="quantity" ng-bind="quantity" placeholder="Quantity" /></p>
<p>Price<input type="text" ng-model="price" ng-bind="price" placeholder="Price" /></p>
<p><label ng-bind="fname"></p>
<p><label ng-bind="(quantity*price) | currency"></p>
<p>{{ fname+ " "+lname }}</p>
<p>{{ person.code+":"+person.name }}</p>
<p>Search Candidate<input type="text" ng-model="search" /></p>
<p>
<ul>
<!-- | filter:'Amit' -->
<li ng-repeat="x in names | filter:search | orderBy:'Name'"">
{{ (x.Name | uppercase) + " lives in " + (x.Country | lowercase)}}
</li>
</ul>
</p>
<p><label ng-show="aTerms">You have agreed to the terms and conditions.</label></p>
<p><input type="button" ng-click="show()" value="Submit Form" ng-disabled="!aTerms" /></p>
<p><input type="checkbox" ng-model="aTerms" />Terms & Conditions</p>
</div>
<script>
/*Pre Render*/
(function (angular) {
function personController($scope,$http) {
$scope.fname = "Michael";
$scope.lname = "Clark";
$scope.show = function () { alert('Thanks for submitting the form. We will contact you soon');}
//$scope.names = [{ name: 'Ritesh', country: 'India' }, { name: 'Amit', country: 'UK' }, { name: 'Shalini', country: 'US' }]
$http.get("http://www.w3schools.com/website/Customers_JSON.php").success(function (response) { $scope.names = response });
};
angular.module("app", []).controller("personController", ['$scope','$http', personController]);
})(angular);
</script>
</body>
</html>
Thanks
Ritesh
No comments:
Post a Comment
Comments are welcome, Please join me on my Linked In account
http://in.linkedin.com/pub/ritesh-tandon/21/644/33b