<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<body ng-app="myApp" ng-controller="myController">
<h4>using ng-model directive</h4>
<div ng-app="myApp" ng-controller="myController" ng-init="number1=20; number2=30">
Number 1: <input type="number" ng-model="number1">
Number 2: <input type="number" ng-model="number2">
Result: {{ number1 + number2 }}
</div>
<br><br>
<h4>using ng-bind directive</h4>
<div ng-app="myApp" ng-controller="myController">
Number 1: <input type="number" ng-model="number3" ng-change="add()"/>
Number 2: <input type="number" ng-model="number4" ng-change="add()"/>
<b>Addition=:</b> <span ng-bind="result1"></span>
</div>
<br><br>
<div ng-app="myApp" ng-init="myButton=true">
<button ng-disabled="myButton">Click Me!</button>
<br /><br />
<input type="checkbox" ng-model="myButton"/>Button
<br /><br />
Disabled : {{ myButton }}
</div>
<div ng-app="myApp" ng-controller="myController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller(
'myController', function ($scope) {
$scope.number3 = 1;
$scope.number4 = 1;
$scope.add = function () {
$scope.result1 = ($scope.number3 + $scope.number4);
}
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
</script>
</html>
0 Comments