JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<html ng-app>
    <body>
        <table ng-repeat="item in allItems">
            <tr ng-if="!item.isEdited">
                <span>{{ item.label }}</span>
                <button ng-click="edit(item)"/>
            </tr>
            <tr ng-if="item.isEdited">
                <input type="text" ng-model="item.label"/>
                <button ng-click="dismiss(item)"/>
            </tr>
        </table>
    </body>
</html>

JavaScript

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

app.controller("TestController", function($scope){
    $scope.allItems = [
        { id: 1, label: "test label 1" },
        { id: 2, label: "test label 2" },
        { id: 3, label: "test label 3" },
        { id: 4, label: "test label 4" }  
    ];
        
        $scope.edit = function(item){
            item._old_ = angular.copy(item);
            item.isEdited = true;
        }
        $scope.edit = function(item){
            item = angular.copy(item._old_);
            delete item._old_;
        }
});