JSFiddle - React, Tailwind, and code Playground

by dandoyon

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-app='myApp'>
<div ng-controller="Ctrl">
    
    <p class='click2edit' ng-click='editThis("name1")'>{{names.name1}}</p>
    
    <p class='click2edit' ng-click='editThis("name2.surn")'>{{names.name2.surn}}</p>
    
    <br>
    <input type='text' ng-model='names[editing]'/>
</div>
</div>

CSS

.click2edit:hover{color:red;cursor:pointer;}

JavaScript

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

function Ctrl($scope){
    $scope.names = {name1: 'homer', name2:{surn:'simpson'}}
    $scope.editing = 'name1'
    $scope.editThis = function(name){$scope.editing = name}            
        
    
}