<div class="container" ng-app="myApp" ng-controller="ItemCtrl">
<div class="row">
<div class="one-half column offset-by-three">
<h1 class="text-center">Groceries</h1>
<ul>
<li ng-repeat="item in items" class="fade">
{{item.name}}
<span ng-click="removeItem($index)">X</span>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="one-half column offset-by-three">
<input type="text" ng-model="item.name" />
<button class="button-primary" ng-click="addItem()">Add Item</button>
</div>
</div>
</div>
.text-center {
text-align: center;
}
li span {
float: right;
cursor: pointer;
}
.fade {
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade.ng-enter {
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
.fade.ng-leave {
opacity: 1;
}
.fade.ng-leave.ng-leave-active {
opacity: 0;
}
angular.module('myApp', ['ngAnimate'])
.controller('ItemCtrl', function($scope) {
$scope.items = [
{name: "Lunchmeat"},
{name: "Bread"},
{name: "Milk"},
{name: "Mustard"},
{name: "Cheese"}
];
$scope.addItem = function() {
$scope.items.push($scope.item);
$scope.item = {};
};
$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
};
});