var myApp = angular.module("myApp", []); myApp.factory("items", function () { var items = {}; items.data = [{ id: "1", title: "Mango" }, { id: "2", title: "Orange" }, { id: "3", title: "Graphes" }, { id: "4", title: "Pineapple" }]; return items; }); function fruitController($scope, items) { $scope.items = items; $scope.deleteItem = function (index) { items.data.splice(index, 1); } $scope.addItem = function (index) { items.data.push({ id: $scope.items.data.length + 1, title: $scope.newItemName }); $scope.newItemName = ""; } }
<div ng-app="myApp"> <ul ng-controller="fruitController" class="nav"> <input type="text" value="ItemName" ng-model="newItemName" placeholder="name of new item..."> <button ng-click="addItem()">Add Me</button> <li ng-repeat="item in items.data" id="item{{item.id}}"> <a href="#">{{item.title}}</a><a ng-click="deleteItem($index)" class="delete-item">x</a> </li> </ul> </div>
a { text-decoration: none; font-weight: bold; font-size: 12px; font-family: Arial, sans-serif; color: #333; } .nav { list-style-type: none; } .nav > li { border: 1px solid #2987A3; background-color: #7ED3ED; padding: 3px; margin: 3px; width: 150px; } .nav > li:hover { background-color: #B1FAFA; color: #fff; } .delete-item { float: right; margin-right: 2px; color: #fff; padding: 2px 6px; background-color: #FC6A6A; border-radius: 100%; }