Hi, today I will show you how to create a NOTE in Angular JS.
1.html:-
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">
<h2>My Note</h2>
<textarea ng-model="message" cols="40" rows="10" maxlength="100" style="resize:none"></textarea>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
<script src="2.js"></script>
<script src="3.js"></script>
</body>
</html>
2.js:-
var app = angular.module("myNoteApp", []);
3.js:-
app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Note Saved");};
});
Screenshot :-
Explanation:-
When you will run the "1.html" file in the browser, it will look like this.
You can write/type till 100 words, more than that, it won't allow/accept. When you will click on the "Save" button, it will show the Save message on the screen.
When you will click on the "Clear" button, it will clear/erase whatever you have typed till now.
No comments:
Post a Comment