function FruitCtrl($scope) { $scope.fruits = [{ "id": 1, "name": "Apple", "price": .50, "count": 213, "showDelete": false, "show": true }, { "id": 2, "name": "Orange", "price": .45, "count": 665, "showDelete": false, "show": true }, { "id": 3, "name": "Banana", "price": .60, "count": 146, "showDelete": false, "show": true }, { "id": 4, "name": "Kiwi", "price": .80, "count": 199, "showDelete": false, "show": true }]; $scope.hover = function(fruit) { // Shows/hides the delete button on hover return fruit.showDelete = ! fruit.showDelete; }; $scope.delete = function(fruit) { // Hides a row of fruit, if the delete button was clicked alert("Deleting the " + fruit.name); return fruit.show = ! fruit.show; }; }
<div ng-app> <div ng-controller="FruitCtrl"> <table> <tr ng-repeat="fruit in fruits" ng-mouseenter="hover(fruit)" ng-mouseleave="hover(fruit)" ng-show="fruit.show"> <td>{{ fruit.name }}</td> <td>{{ fruit.price | currency }}</td> <td>{{ fruit.count }}</td> <td><a ng-show="fruit.showDelete" ng-click="delete(fruit)">Delete</a></td> </tr> </table> </div> </div>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }