JSFiddle - React, Tailwind, and code Playground

by andrewboni

HTML

<script src="http://code.angularjs.org/1.0.8/angular-sanitize.min.js"></script>
<script src="http://angular-ui.github.io/ui-utils/assets/vendor/angular.min.js"></script>
<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>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
tr {
    cursor: default;
}
td {
    padding: 5px 15px;
}

JavaScript

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 = false;  
    };
}