In the previous lesson, I have shown how to add an item and simultaneously how to delete it.
Now, I will show you, only how to add an item in the webpage.
only_add.html:-
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular.min.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope){
$scope.names = ['Ram', 'Raju', 'Shyam'];
$scope.addName = function() {
$scope.names.push($scope.enteredName);
$scope.enteredName='';
};
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
<form ng-submit="addName()">
<input type="text" placeholder="Add Items" ng-model="enteredName">
<input type="submit" value="add">
</form>
</body>
</html>
Screenshots:-
Now, I will show you, only how to add an item in the webpage.
only_add.html:-
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular.min.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope){
$scope.names = ['Ram', 'Raju', 'Shyam'];
$scope.addName = function() {
$scope.names.push($scope.enteredName);
$scope.enteredName='';
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
<form ng-submit="addName()">
<input type="text" placeholder="Add Items" ng-model="enteredName">
<input type="submit" value="add">
</form>
</body>
</html>
Screenshots:-
Explanation:-
When we click on the "Add" button, after typing any name in the text box, the name will be displayed on the screen.
No comments:
Post a Comment