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)">×</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)