10. Create Angular JS application that allows users to maintain a collection of items. The
application should display the current total number of items, and this count should automatically
update as items are added or removed. Users should be able to add items to the collection and
remove them as needed. Note: The default values for items may be included in the program.
<html ng-app="itemApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-controller="itemController">
<h2>Item Collection</h2>
Add New Item:
<input type="text" ng-model="newItem" />
<button ng-click="addItem()">Add Item</button>
<ul>
</ul>
<li ng-repeat="item in items track by $index">
{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
<p>Total Items: {{ items.length }}</p>
<script>
var app = angular.module('itemApp', []);
app.controller('itemController', function ($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3']; // Default items
$scope.newItem = '';
$scope.addItem = function () {if
($scope.newItem) {
$scope.items.push($scope.newItem);
$scope.newItem = ''; // Clear the input field
}
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};
});
</script>
</body>
</html>
No comments:
Post a Comment