JSFiddle - React, Tailwind, and code Playground

by vincent ng

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="MyApp">
  <div ng-controller="myController">
    <table>
      <tr ng-repeat="contactVar in ContactData">
        <td contenteditable="false" ng-dblclick="editMe($event)" ng-mouseleave="NotEditMe($event,contactVar)"> {{contactVar.FirstName}}</td>
      </tr>
    </table>

  </div>
</body>

JavaScript

var app = angular.module('MyApp', []);

app.controller('myController', ['$scope', function($scope) {

  $scope.mcm = {};
  $scope.ContactData = [{
    Id: 1,
    FirstName: 'ABC'
  }, {
    Id: 2,
    FirstName: 'DEF'
  }]


  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }

  $scope.editMe = function(obj) {
    obj.target.setAttribute("contenteditable", true);
    obj.target.focus();
  }

  $scope.NotEditMe = function(obj, contact) {
    obj.target.setAttribute("contenteditable", false);
    console.log(contact.Id);
    console.log(contact.FirstName);
  }
}]);