Now, in this application, you will be able to see the number of names(or items) added in this app.
index.html:-
<html ng-app>
<head> <title> Mean Tutorial </title> </head>
<div ng-controller="meetupsController">
<h1> There are {{meetups.length}} people added</h1
<ul>
<li ng-repeat="meetup in meetups">
{{meetup.name}}
</li> </ul> <br/>
<form ng-submit="CreateMeetup()">
<input type="text" placeholder="Meetup name" ng-model="meetupName"> </input>
<button type="submit">Add</button>
</form>
</div>
<script src="angular.js"></script>
<script src="meetupsController.js"></script>
</body>
</html>
meetupsController.js:-
function meetupsController($scope)
{
//$scope.meetupsCount=10;
$scope.meetups = [
{name:"Anik"},
{name:"Rahul"}
]
$scope.CreateMeetup = function()
{
$scope.meetups.push({name:$scope.meetupName});
$scope.meetupName='';
}
}
Screenshots:-
Screenshots:-
Explanation:-
Once you will add a name in this app, the number of names added will increase automatically. Here, "length" keyword is used to check the number of names added, so as to increase the number in the webpage.
No comments:
Post a Comment