ng-cut,copy
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<input ng-cut="count = count + 1" ng-init="count=0" value="hello">
<input ng-copy="count1 = count1 + 1" ng-init="count1=0" value="hello">
<p>The text has been cut {{count}} times.</p>
<p>The text has been copied {{count1}} times.</p>
</body>
</html>
Currency Filter
<!DOCTYPE html>
<html >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Default currency: {{person.salary | currency}} <br />
Custom currency identifier: {{person.salary | currency:'Rs.'}} <br />
No Fraction: {{person.salary | currency:'Rs.':0}} <br />
Fraction: {{person.salary | currency:'Rs.':4}} <br />
Fraction 2: <span ng-bind="person.salary| currency:'GBP':2"></span>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.person = { firstName: 'James', lastName: 'Bond', salary: 100000}
});
</script>
</body>
</html>
Addition
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<title></title>
</head>
<body ng-app="">
<input type="number" ng-model="add1">+<input type="number" ng-model="add2">
= {{add1 + add2}}
</body>
</html>
OrderBy Filter
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="x in spots | orderBy : '-country'">
{{x.destination + ", " + x.country}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.spots = [
{destination : "Taj Mahal", country : "India"},
{destination : "Christ the Redeemer", country : "Brazil"},
{destination : "Colosseum", country : "Italy"}
];
});
</script>
</body>
</html>
Angular Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="" ng-init="students=['Manoj', 'Ayush', 'Rahul', 'Sameer', 'Ram', 'Moin']">
<input type="text" ng-model="search"> <br>
Result: {{students | filter:search}}
</body>
</html>
Number Filter
<!DOCTYPE html>
<html >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app >
Enter Amount: <input type="number" ng-model="amount" /> <br />
amount | number = {{amount | number}} <br />
amount | number:2 = {{amount | number:2}} <br />
amount | number:5 = {{amount | number:5}} <br />
amount | number:8 = <span ng-bind="amount | number:8"></span>
</body>
</html>
Controller Example
<!DOCTYPE html>
<html >
<head>
<title>AngualrJS $scope object</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js
"></script>
</head>
<body ng-app="myNgApp">
<div ng-controller="myController">
name: <br />
{{name}}<br />
<span ng-bind="name"></span> <br />
<input type="text" ng-model="name" />
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.name = "navneet";
});
</script>
</body>
</html>
Angular Filter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
<style>
body{
margin: 10px 50px;
}
p{
margin-top: 10px;
margin-bottom: 10px;
}
html {
font-size: 20px;
text-align: center;
font-weight: 400;
line-height: 1.125;
color: #202011;
font-family: Arial, Helvetica, sans-serif;
}
#div1 {
background-color: #4dca6c;
font-size: 30px;
font-weight: 400;
text-align: center;
}
</style>
</head>
<body ng-app="mymodule" ng-controller="mycontroller">
<h1>Students Record</h1>
<input type="text" ng-model='search'><br>
<div>
Result: {{students | filter:search}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
var myapp = angular.module("mymodule", []);
myapp.controller("mycontroller", function($scope) {
$scope.students = ['Ram', 'Sham', 'Aman', 'Raj','Raman', 'Shamsher','Shamu',
'Amandeep', 'Rajan', 'Ramanpreet', 'Shally', 'Shami', 'Rajesh' ];
})
</script>
</body>
</html>
Uppercase Lowercase Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app >
<h1>AngularJS Uppercase/Lowercase Filter Demo: </h1>
<div ng-init="person.firstName='Rahul';person.lastName='Sharma'">
Lower case: {{person.lastName | lowercase}} <br>
Upper case: {{person.lastName | uppercase}}
</div>
</body>
</html>
Controller Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="mymodule" ng-controller="mycontroller">
<div>
{{'message: '+message}}
</div>
<script>
var myapp = angular.module("mymodule",[]);
myapp.controller("mycontroller", function($scope){
$scope.message = "hey";
});
</script>
</body>
</html>
ng-rpeat
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h1>Fill the below form</h1>
<div ng-app = "" ng-init = "cities = ['Jalandhar', 'Amritsar', 'Ludhiana']">
<input type = "text" ng-model = "name"><br><br>
Your name is the following : <p ng-bind = "name"></p>
List of cities you can choose:
<p ng-repeat = "x in cities"> {{x}}</p>
</div>
</body>
</html>
ng-repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app ng-init="cities=['Delhi','Agra','Manali']">
<h1>Fill The Below Form</h1>
<input type="text" ng-model="name">
<p>Your name is : {{name}}</p>
<h3>List of cities you can choose:</h3>
<ul>
<li ng-repeat="x in cities">{{x}}</li>
</ul>
</body>
</html>
Addition using ng-model and ng-bind
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<input type="number" ng-model="n1">
<input type="number" ng-model="n2">
<p>{{n1+n2}}</p>
<p ng-bind='n1+n2'></p>
</div>
</body>
</html>
ng-model and ng-bind
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js
"></script>
</head>
<body ng-app>
<input type="text" ng-model="name" />
<div>
Hello {{name}}
<p ng-bind="name"></p>
</div>
</body>
</html>
Angular Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div>
{{{name:'Rajesh', marks:98}.name}}
</div>
</body>
</html>
Addition using Angularjs
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div>
10==20 = {{1==2}}
</div>
<div>
10+20 = {{10+20}}
</div>
</body>
</html>
ng-model and ng-repeat
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h1>Fill the below form</h1>
<div ng-app = "" ng-init = "cities =
[{name:'Jalandhar', pin:'100'},
{name:'Amritsar', pin:'101'},
{name:'Noida', pin:'102'}]">
<input type = "text" ng-model = "name"><br><br>
Your name is the following : <p ng-bind = "name"></p>
List of cities you can choose:
<ul>
<li ng-repeat = "cities in cities">
{{ 'cities: ' + cities.name}}
</li>
</ul>
</div>
</body>
</html>
Basic Calculator
<!DOCTYPE html>
<html>
<head>
<title>First AngularJS Application</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js
"></script>
</head>
<body ng-app ng-init="Num1=0;Num2=0;Num3=0;Num4=0;Num5=0;Num6=0;Num7=0;Num8=0" >
<h1>First AngularJS Application</h1>
Addition:
<input type="number" ng-model="Num1"> + <input type="number" ng-model="Num2">
= <span>{{Num1 + Num2}}</span><br>
Subtraction:
<input type="number" ng-model="Num3"> - <input type="number" ng-model="Num4">
= <span>{{Num3 - Num4}}</span><br>
Multiplication:
<input type="number" ng-model="Num5"> x <input type="number" ng-model="Num6">
= <span>{{Num5 * Num6}}</span> <br>
Division:
<input type="number" ng-model="Num7"> / <input type="number" ng-model="Num8">
= <span>{{Num7 / Num8}}</span>
</body>
</html>
ng-mouse move(1)
<!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<p>Mouse move on letter</p>
<div style="width:100px">
<p ng-mousemove="count=count==25?count=0:count=count+1" style="margin-top: -30px; font-size: 180px; color:{{Colors[count]}}">{{arr[count-0]}}</p>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
$scope.Colors = ["aqua", "tomato", "beige", "tan", "blue", "brown", "cyan", "darkblue", " darkcyan", " darkgrey", "darkgreen",
" darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey"];
}]);
</script>
</body>
</html>
ng-mouse move(2)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<title>Mouse move</title>
</head>
<body ng-app='' ng-init='move=0'>
<h1 ng-mousemove='move=move+1'>
Heading 1
</h1>
<h1 ng-mousemove='move=move+1'>
Heading 2
</h1>
<p>Move count: {{move}}</p>
</body>
</html>
ng-mouse move(3)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<input type="button" value="Mouse Move" ng-mousemove="count=count+1" />
{{count}}
</div>
</body>
</html>
ng-mouse leave
<!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
.nav {
padding: 10px;
cursor: pointer;
background-color: lightgreen;
border-bottom: 5px solid tomato;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<!-- you can also use mouseenter or mouseleave for this program -->
<span class="nav" ng-repeat="p in nav" ng-style="style" ng-mouseover="style={'border-bottom': '5px solid red','background-color':'pink','cursor':'pointer'}" ng-mouseout="style={}">{{p}}</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.nav=["Home","About","Contact"]
}]);
</script>
</body>
</html>
ng-cut, copy and paste
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-cut, ng-copy and ng-paste Events with Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngcopyApp', []);
app.controller('ngcopyCtrl', function ($scope) {
$scope.cuttext = false;
$scope.copytext = false;
$scope.pasttext = false;
});
</script>
</head>
<body>
<div ng-app="ngcopyApp" ng-controller="ngcopyCtrl">
Copy the Text: <input type="text" ng-copy="copytext=true" value="Hi, Welcome to Everyone" /> <br />
<span>Text Copied:<b>{{copytext}}</b></span><br />
Cut the Text: <input type="text" ng-cut="cuttext=true" value="Hi, Welcome to Everyone" /> <br />
<span>Text Cut:<b>{{cuttext}}</b></span><br />
Paste the Text: <input type="text" ng-paste="pasttext=true" /> <br />
<span>Text Pasted:<b>{{pasttext}}</b></span>
</div>
</body>
</html>
Angular Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myController">
<input type="text" ng-model="find" /> <br />
Result: {{students | filter:find}}
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.students = ['Manoj', 'Ayush', 'Rahul', 'Sameer', 'Ram', 'Moin']
});
</script>
</body>
</html>
ng-disabled
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="" ng-init="Switch=false">
<input type="test" ng-disabled="Switch"><br>
<input type="checkbox" ng-model="Switch">Switch<br>
{{Switch }}
</div>
</body>
</html>
ng-show, hide
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<!-- similarly use ng-hide -->
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</body>
</html>
ng-paste
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.green {
background-color: lightgreen;
}
</style>
</head>
<body ng-app="">
<input ng-class="{green}" ng-paste="green=true" value="hello">
</body>
</html>
ng-click, dblclick
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.green {
background-color: lightgreen;
}
.red {
background-color: red;
}
</style>
</head>
<body ng-app="">
<input ng-class="{green,red}" ng-click="green=true;red=false" ng-dblclick="green=false;red=true" value="hello">
</body>
</html>
ng-cut, copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.green {
background-color: lightgreen;
}
.red {
background-color: red;
}
</style>
</head>
<body ng-app="">
<input ng-class="{green,red}" ng-copy="green=true;red=false" ng-cut="green=false;red=true" value="hello">
</body>
</html>
ng-mouseOverOut
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<style>
.greenDiv {
width: 100px;
height: 100px;
background-color: lightgreen;
padding:2px;
}
.blueDiv {
width: 100px;
height: 100px;
background-color:lightskyblue;
padding:2px;
}
</style>
</head>
<body ng-app>
<div ng-class="{greenDiv: Over, blueDiv: Out}" ng-mouseover="Over=true;Out=false;" ng-mouseout="Out=true;Over=false">
Mouse <span ng-show="Over">Over</span> <span ng-show="Out">Out</span>
</div>
</body>
</html>
ng-blur, keyUp
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.green {
background-color: lightgreen;
}
.red {
background-color: red;
}
</style>
</head>
<body ng-app="">
<input ng-class="{green,red}" ng-keyup="green=true;red=false" ng-blur="green=false;red=true">
</body>
</html>
JSON Filter
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<pre>{{destination | json : 10}}</pre>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.destination = {
name : "Las Vegas",
city : "Los Angeleds",
country : "Ibiza"
};
});
</script>
</body>
</html>
limit to filter(1)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<h1>{{name | limitTo : 7}}</h1>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.name = "navneet kaur";
});
</script>
</body>
</html>
limit to filter(2)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<!-- how many items:position -->
<div ng-repeat="fav in favdestinations | limitTo : 3:2">{{fav}}</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.favdestinations = ["Los Angeles", "Las Vegas", "Bangkok", "Goa", "Berlin", "Paris","Ibiza"];
});
</script>
</body>
</html>
limit to filter(3)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<div ng-repeat="fav in favdestinations | limitTo : -5">{{fav}}</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.favdestinations = ["Los Angeles", "Las Vegas", "Bangkok", "Goa", "Berlin", "Paris","Ibiza"];
});
</script>
</body>
</html>
ng-mouseMove
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<!-- also use ng-mouseover and ng-click here instead of ng-mousemove -->
<h1 ng-mousemove="count = count + 1" ng-init="count=0">Move the mouse over me</h1>
<h2>{{count}}</h2>
</body>
</html>
<!-- you can also use a controller -->
<!-- <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html> -->
ng-click(1)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<button ng-click="func()">Click Me!</button><br><br>
<div ng-show="sho">
<img src="1.jpg" height="200" width="200">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.sho = false;
$scope.func = function() {
$scope.sho = !$scope.sho;
}
});
</script>
</body>
</html>
ng-click(2)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
Enter Password: <input type="password" ng-model="password"> <br><br>
<button ng-click="msg(password)">Show Password</button>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.msg = function (value) {
alert(value);
}
});
</script>
</body>
</html>
Date Filter
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
{{ dat | date }}<br>
{{ dat | date : "fullDate" }}<br>
{{ dat | date : "longDate" }}<br>
{{ dat | date : "shortDate" }}<br>
{{ dat | date : "dd.MMMM.yyyy" }}<br>
{{ dat | date : "dd.MM.yyyy" }}<br>
{{ dat | date : "dd.MM.yy" }}<br>
{{ dat | date : "yyyy" }}
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.dat = new Date();
});
</script>
</body>
</html>
Dropdown and Bind(1)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="choice">
<option ng-repeat="place in spots" ng-value="{{place}}">{{place.country}}</option>
</select>
<b><p>Your destination: {{choice.destination}} </p><b>
<b><p>Country: {{choice.country}}</p><b></b>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.spots = [
{destination : "Taj Mahal", country : "India"},
{destination : "Christ the Redeemer", country : "Brazil"},
{destination : "Colosseum", country : "Italy"}
];
});
</script>
</body>
</html>
Dropdown and Bind(2)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="choice">
<option ng-repeat="country in countries">{{country}}</option>
</select>
<!-- <select ng-model="choice" ng-options="country for country in countries">
</select> -->
<b><p>Your choice: {{choice}}</p><b>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.countries = ["India", "USA", "Germany"];
});
</script>
</body>
</html>
Dropdown ng-options
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="" ng-options="country for country in countries">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.countries = ["India", "USA", "Germany"];
});
</script>
</body>
</html>
Dropdwon ng-repeat
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<select>
<option ng-repeat="country in countries">{{country}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.countries = ["India", "USA", "Germany"];
});
</script>
</body>
</html>
Order By Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<h1>AngularJS orderBy Filter Demo: </h1>
<div ng-controller="myController">
<select ng-model="SortOrder">
<option value="+name">Name (asc)</option>
<option value="-name">Name (dec)</option>
<option value="+marks">Marks (asc)</option>
<option value="-marks">Marks (dec)</option>
</select>
<ul ng-repeat="student in students | orderBy:SortOrder">
<li>{{student.name}} - {{student.marks}}</li>
</ul>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.students = [{ name: 'John', marks: 89 },
{ name: 'Mary', marks: 23 },
{ name: 'Mike', marks: 12 },
{ name: 'Bill', marks: 98 },
{ name: 'Ram', marks: 56 },
{ name: 'Steve', marks: 64 }]
//$scope.SortOrder = '+name';
});
</script>
</body>
</html>
ng-init
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="sometext='How are you?'">
<h1>{{sometext}}</h1>
</div>
</body>
</html>
Student Details Showcase
<html>
<head>
<title>Angular JS Modules</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="studentController">
<h2>AngularJS Sample Application</h2>
<div>
<table border = "2">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table border="2">
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Navneet",
lastName: "Kaur",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
