<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
type
=
"text/javascript"
src
=
</
script
>
</
head
>
<
body
ng-app
=
"myApp"
>
<
div
ng-controller
=
"myCtrl"
class
=
"w3-container"
>
<
h1
align
=
"center"
class
=
"w3-text-green"
>
GeeksforGeeks
</
h1
>
<
h4
align
=
"center"
class
=
"w3-text-green"
>
A computer science portal for geeks
</
h4
>
<
ul
>
<
li
ng-repeat
=
"item in items"
>
Buy {{item.name}} {{item.quantity}}
<
button
ng-click
=
Bought
($index)
class="w3-button w3-round w3-border
w3-margin-bottom">
Bought
</
button
>
</
li
>
</
ul
>
<
p
class
=
"w3-text-red"
align
=
"center"
ng-if
=
"items.length == 0"
>
Everything is Bought!
</
p
>
</
div
>
<
script
type
=
"text/javascript"
>
(function () {
angular.module("myApp", []).controller(
"myCtrl", function ($scope) {
$scope.items = [
{ name: "Milk", quantity: "2 Packet" },
{ name: "Biscuit", quantity: "10 Packet" },
{ name: "Bread", quantity: "5 Packet" }
];
$scope.Bought = function (index) {
$scope.items.splice(index, 1);
};
});
})();
</
script
>
</
body
>
</
html
>