Scribd
Upload
11 views2 pages

AngularJS Shopping List App Guide

The document describes an Angular JS application that displays a shopping list. It uses directives and controllers to allow users to add and remove items from the list. The application initializes with default shopping items and includes an input field and buttons to add and remove items using Angular functions.

Uploaded by

srvenu002
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views2 pages

AngularJS Shopping List App Guide

The document describes an Angular JS application that displays a shopping list. It uses directives and controllers to allow users to add and remove items from the list. The application initializes with default shopping items and includes an input field and buttons to add and remove items using Angular functions.

Uploaded by

srvenu002
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

2. Develop an Angular JS application that displays a list of shopping items.

Allow users to
add and remove items from the list using directives and controllers. Note: The default
values of items may be included in the program.
<html ng-app="shoppingApp">
<head>
<title>AngularJS Shopping List</title>
<script
src="[Link]
script>
</head>
<body ng-controller="shoppingCtrl">
<h2>Shopping List</h2>
<!-- Display the items in list
<ul>
<li ng-repeat="item in shoppingItems">{{ item }} &nbsp;
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul> -->
<table>
<tr ng-repeat="item in shoppingItems">
<td>{{ item }}</td>
<td><button ng-click="removeItem($index)">Remove</button></td>
</tr>
</table>
<!-- Input field and button to add a new item -->
<input type="text" ng-model="newItem" placeholder="Add a new item">
<button ng-click="addItem()">Add Item</button>

<script>
[Link]('shoppingApp', [])
.controller('shoppingCtrl', function ($scope) {
// Default values for shopping items
$[Link] = ['Apples', 'Bananas', 'Bread', 'Milk'];

// Function to add a new item


$[Link] =
function () { if
($[Link]) {
$[Link]($[Link]);
$[Link] = ''; // Clear the input field after adding
}
};

// Function to remove an item


$[Link] = function (index) {
$[Link](index, 1);
};
});
</script>
</body>
</html>
Sample Output:

You might also like