Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Add & Remove Application in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 29
    Comment on it

    Hello Readers,

    Hope you are doing good today.

    The below code example will provide you a demo to create simple cart application using AngularJS.
    Using this you can Add and Remove item in your application.

     

    Include required library file in  <head></head> section

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

     

    Your index.html page:

    <h1>Add & Remove product </h1>
    				<div ng-app="myCartList" ng-controller="myCtrl">
    				    <ul>
    				        <li ng-repeat="x in products">
    				            {{x}}
    				             <span style="color:red" ng-click="removeItem($index)">&times;</span>
    				        </li>
    				    </ul>
    				    <input ng-model="addMe" placeholder="add Item Name">
    				    <button ng-click="addItem()">Add</button>
    				    <p>{{errortext}}</p>
    				</div>

     

    AngularJS Script

    var app = angular.module("myCartList", []);
    app.controller("myCtrl", function($scope) {
        $scope.products = ["Egg", "Bread"];
    
        //Add item in Cart
        $scope.addItem = function () {
            $scope.errortext = "";
            if (!$scope.addMe) {return;}
    
            //Check if product already in cart
            
            if ($scope.products.indexOf($scope.addMe) == -1) {
                $scope.products.push($scope.addMe);
            } else {
                $scope.errortext = "The item is already in your shopping list.";
            }
        }
        //Remove Item form cart on click
        $scope.removeItem = function (x) {
            $scope.errortext = "";
            $scope.products.splice(x, 1);
        }
    });

     

 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: