(function() {
'use strict';
angular.module('plunker', [])
.controller('MainController', MainController)
function MainController() {
var mainVm = this;
mainVm.deleteItem = function(position) {
mainVm.items.splice(position, 1);
}
mainVm.addItem = function() {
mainVm.newitem.pid = mainVm.items.length + 1;
mainVm.items.push(mainVm.newitem);
mainVm.newitem = null;
}
mainVm.items = [{
"pid": 1,
"pname": "Shampoo",
"price": 210,
"deldate": "1/15/2016"
}, {
"pid": 2,
"pname": "Conditioner",
"price": 260,
"deldate": "1/15/2016"
}, {
"pid": 3,
"pname": "Hair Dryer",
"price": 204,
"deldate": "1/15/2016"
}, {
"pid": 4,
"pname": "Hair Color",
"price": 230,
"deldate": "1/15/2016"
}]
}
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@3.3.6" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="bootstrap@3.3.6" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.6" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.6" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainController as mainVm">
<br>
<p>Add a New Product in the Cart</p>
<form ng-submit="mainVm.addItem()">
<div class="form-group">
<label for="pname">Product Name</label>
<input type="text" ng-model="mainVm.newitem.pname" class="form-control" id="pname" placeholder="Product Name">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" ng-model="mainVm.newitem.price" class="form-control" id="price" placeholder="Price">
</div>
<div class="form-group">
<label for="date">Delivery Date</label>
<input type="date" ng-model="mainVm.newitem.deldate" id="deldate">
</div>
<button type="submit" class="btn btn-default">Add</button>
</form>
<br><br>
<input type="search" class="form-control" ng-model="mainVm.search" placeholder="Search here..">
<br><br>
<table class="table table-stripped">
<thead>
<tr>
<th>Delete</th>
<th>Product Id</th>
<th>Product Name</th>
<th>Price</th>
<th>Delivery Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in mainVm.items | filter:mainVm.search">
<td><i ng-click="mainVm.deleteItem($index)" class="fa fa-times"></i></td>
<td>{{item.pid}}</td>
<td>{{item.pname}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.deldate | date:'MM/dd/yyyy'}}</td>
</tr>
</tbody>
</table>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */