JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="MyApp">
<div ng-controller="demo">
   <h4>Content Editable</h4>
  <!-- <div contenteditable ng-model="text"></div> -->
  <ul>
    <li ng-repeat="item in list" style="display: flex">
      <span>{{$index+ 1}}) </span>
      <div  contenteditable ng-model="item.text"></div>
    </li>
  </ul>
</div>
 
  <br>
</body>

SCSS

[contenteditable] {
  outline: none;
  padding-left: 5px;

  &:focus{
    border-bottom: 1px solid grey;
    min-width:150px;
    
  } 
}  
li{
  list-style : none;
}

JavaScript

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

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

			

      function read() {
        ngModel.$setViewValue(element.html());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

app.controller('demo',function($scope){
		$scope.list = [{
				"text" : 'Are you able to relocate'
				},
        {
				"text" : "Do you have any certification"
				},{
				"text" : 'Do you have a valid passport'
				},]
})