Angular
Content
Angular
var app=angular.module('MultiplierApp',[]);
app.controller('MultiplierController',['$scope',function($scope){
$scope.n1=10;
$scope.n2=20;
$scope.result=$scope.n1*$scope.n2;
$scope.multiply=function(){
$scope.result=$scope.n1*$scope.n2;
};
}]);//controller
<html ng-app="MultiplierApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="MultiplierApp.js"></script>
</head>
<body>
<div ng-controller="MultiplierController">
<br />First <br />
<br />Second <br />
<input ng-model="n1"/>
<input ng-model="n2"/>
<br /> <button ng-click="multiply()">Multiply</button>
<br />{{result}}
</div>
</body></html>
var app=angular.module('MultiplierApp',[]);
app.controller('MultiplierController',['$scope',function($scope){
$scope.n1=10;
$scope.n2=20;
$scope.multiply=function(){
return $scope.n1*$scope.n2;
};
}]);//controller
<html ng-app="MultiplierApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="MultiplierApp.js"></script>
</head>
<body>
<div ng-controller="MultiplierController">
<br />First <br />
<br />Second <br />
<input ng-model="n1"/>
<input ng-model="n2"/>
<br />
<button ngclick="multiply()">Multiply</button>
<br />
{{multiply()}}
</div>
</body></html>
DropDown Demo
var app=angular.module('FMA',[]);
app.controller('FMC',['$scope',function($scope){
$scope.price=0;
$scope.dishes=[
{"name":"Noodles","price":30},
{"name":"Samosa","price":10},
{"name":"Poha","price":8},
{"name":"Chai","price":5}
];//Array of Dishes
}]);
<html ng-app="FMA">
<body>
<div ng-controller="FMC">
<select ng-model="price">
<option ng-repeat="dish in dishes"
value="{{dish.price}}">
{{dish.name}}
</option>
</select>
<br />
</div>
</div>
<div ng-if="price != 0">
{{price}}
</body>
</html>
Multiple Checkbox
<html ng-app="BA">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="BeverageApp.js"></script>
</head>
<body>
<div ng-controller="BC">
<label ng-repeat="drink in drinks">
<br />
<input type="checkbox" name="selected[]"
value="{{drink.price}}"
ngchecked="{{selected.indexOf(drink.name)>=0}}"
ng-click="updateUI(drink.name)"
/>
{{drink.name}}@{{drink.price}}
</label>
<br />
{{totl()}}
</div>
</body>
</html>
var app = angular.module('BA', []);
app.controller('BC', ['$scope', function ($scope) {
$scope.drinks = [
{"name": "Pepsi", "price": 12},
{"name": "Mirinda", "price": 15},
{"name": "Fanta", "price": 18},
{"name": "Thum Up", "price": 20}
];
$scope.selected = ["Pepsi", "Fanta"];
$scope.updateUI = function (name) {
var idx = $scope.selected.indexOf(name);
if (idx > -1) {
$scope.selected.splice(idx, 1);
}
else {
$scope.selected.push(name);
}
};
$scope.totl = function () {
var count = 0;
angular.forEach($scope.drinks, function (drink) {
if($scope.selected.indexOf(drink.name)>=0){
count += drink.price;
}
});
return count;
};
}]);
var app=angular.module('MultiplierApp',[]);
app.controller('MultiplierController',['$scope',function($scope){
$scope.n1=10;
$scope.n2=20;
$scope.result=$scope.n1*$scope.n2;
$scope.multiply=function(){
$scope.result=$scope.n1*$scope.n2;
};
}]);//controller
<html ng-app="MultiplierApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="MultiplierApp.js"></script>
</head>
<body>
<div ng-controller="MultiplierController">
<br />First <br />
<br />Second <br />
<input ng-model="n1"/>
<input ng-model="n2"/>
<br /> <button ng-click="multiply()">Multiply</button>
<br />{{result}}
</div>
</body></html>
var app=angular.module('MultiplierApp',[]);
app.controller('MultiplierController',['$scope',function($scope){
$scope.n1=10;
$scope.n2=20;
$scope.multiply=function(){
return $scope.n1*$scope.n2;
};
}]);//controller
<html ng-app="MultiplierApp">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="MultiplierApp.js"></script>
</head>
<body>
<div ng-controller="MultiplierController">
<br />First <br />
<br />Second <br />
<input ng-model="n1"/>
<input ng-model="n2"/>
<br />
<button ngclick="multiply()">Multiply</button>
<br />
{{multiply()}}
</div>
</body></html>
DropDown Demo
var app=angular.module('FMA',[]);
app.controller('FMC',['$scope',function($scope){
$scope.price=0;
$scope.dishes=[
{"name":"Noodles","price":30},
{"name":"Samosa","price":10},
{"name":"Poha","price":8},
{"name":"Chai","price":5}
];//Array of Dishes
}]);
<html ng-app="FMA">
<body>
<div ng-controller="FMC">
<select ng-model="price">
<option ng-repeat="dish in dishes"
value="{{dish.price}}">
{{dish.name}}
</option>
</select>
<br />
</div>
</div>
<div ng-if="price != 0">
{{price}}
</body>
</html>
Multiple Checkbox
<html ng-app="BA">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript"
src="BeverageApp.js"></script>
</head>
<body>
<div ng-controller="BC">
<label ng-repeat="drink in drinks">
<br />
<input type="checkbox" name="selected[]"
value="{{drink.price}}"
ngchecked="{{selected.indexOf(drink.name)>=0}}"
ng-click="updateUI(drink.name)"
/>
{{drink.name}}@{{drink.price}}
</label>
<br />
{{totl()}}
</div>
</body>
</html>
var app = angular.module('BA', []);
app.controller('BC', ['$scope', function ($scope) {
$scope.drinks = [
{"name": "Pepsi", "price": 12},
{"name": "Mirinda", "price": 15},
{"name": "Fanta", "price": 18},
{"name": "Thum Up", "price": 20}
];
$scope.selected = ["Pepsi", "Fanta"];
$scope.updateUI = function (name) {
var idx = $scope.selected.indexOf(name);
if (idx > -1) {
$scope.selected.splice(idx, 1);
}
else {
$scope.selected.push(name);
}
};
$scope.totl = function () {
var count = 0;
angular.forEach($scope.drinks, function (drink) {
if($scope.selected.indexOf(drink.name)>=0){
count += drink.price;
}
});
return count;
};
}]);
