JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller='MyController'>
    <ul class="list">
      <li ng-repeat="object in objectsArray">
        <div ng-show="!object.isEditable">
            <span ng-click="startEditing(object)">&nbsp;({{object.text}})</span>
        </div>
        <div ng-show="object.isEditable">
           <input type="text" ng-model="object.text" ng-blur="stopEditing(object)" />
        </div>
      </li>
    </ul>
</div>

JavaScript

angular.module('MyModule', [])

.controller( 'MyController', function($scope){
    
    var session = {
        falg : false
    };
    
    $scope.objectsArray = [
        { text: 'hello there', isEditable: false },
        { text: 'hello again', isEditable: false  },
        { text: 'goodbye', isEditable: false  }
    ];
    
    function edit(obj){
    }
    
    function update(obj){
    }
    
    $scope.startEditing = function(obj){
        if(!session.falg){
            obj.isEditable = true;
            edit(obj);
        }
    }
    
    $scope.stopEditing = function(obj){
        obj.isEditable = false;
        update(obj);
    }
});