Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Add and Remove items in array using AngularJS

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 1
    • 0
    • 48.3k
    Comment on it

    With the help of Angularjs, We can dynamically add or remove list items in an array. It is shown In the example given below.

     

     

    Addition of the list items is done using 'push' method and removal of the item is done using “splice” method. Controller-

    <div ng-app="myApp">
        <ul ng-controller="ItemsController" class="nav">
            <input type="text" value="ItemName" ng-model="newItemName"
            placeholder="name of new item...">
                <button ng-click="addItem()">Add Me</button>
            <li ng-repeat="item in items.data" id="item{{item.id}}">
                <a href="#">{{item.title}}</a>  <a ng-click="deleteItem($index)" class="delete-item">x</a>
            </li>
        </ul>
       </div>
    

    'push' Method-

    $scope.addItem = function (index) {
            items.data.push({
                id: $scope.items.data.length + 1,
                title: $scope.newItemName
            });
        }
    

    “splice” Mehod-

     $scope.deleteItem = function (index) {
            items.data.splice(index, 1);
        }
    
    How to Add and Remove items in array using AngularJS

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: