Scribd Logo
Upload

Welcome to Scribd!

  • 10

    Uploaded by

    Prathiksha Kulal
    2 views1 page
    This document defines an AngularJS application for managing an item collection. It contains an ItemController that initializes an items array with sample data and provides methods to add and remove items. The view displays the item list, a form to add new items, and the total count. Users can enter a new name, click add, and the item will be added to the list. They can also remove items from the list.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines an AngularJS application for managing an item collection. It contains an ItemController that initializes an items array with sample data and provides methods to add and remove items. The view displays the item list, a form to add new items, and the total count. Users can enter a new name, click add, and the item will be added to the list. They can also remove items from the list.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    2 views1 page

    10

    Uploaded by

    Prathiksha Kulal
    This document defines an AngularJS application for managing an item collection. It contains an ItemController that initializes an items array with sample data and provides methods to add and remove items. The view displays the item list, a form to add new items, and the total count. Users can enter a new name, click add, and the item will be added to the list. They can also remove items from the list.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 1

    <!

    DOCTYPE html>
    <html ng-app="itemApp">
    <head>
    <title>Item Collection</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
    script>
    </head>
    <body>
    <div ng-controller="ItemController as itemCtrl">
    <h1>Item Collection</h1>

    <input type="text" ng-model="newItemName" placeholder="Enter item name">


    <button ng-click="itemCtrl.addItem()">Add Item</button>

    <ul>
    <li ng-repeat="item in itemCtrl.items">
    {{ item.name }} <button ng-
    click="itemCtrl.removeItem($index)">Remove</button>
    </li>
    </ul>

    <p>Total number of items: {{ itemCtrl.items.length }}</p>


    </div>

    <script>
    angular.module('itemApp', [])
    .controller('ItemController', function() {
    var vm = this;
    vm.items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' }
    ];

    vm.addItem = function() {
    if (vm.newItemName !== '') {
    vm.items.push({ name: vm.newItemName });
    vm.newItemName = '';
    }
    };

    vm.removeItem = function(index) {
    vm.items.splice(index, 1);
    };
    });
    </script>
    </body>
    </html>

    You might also like