CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
ro ko
ro ko

Reputation: 2986

Make table cell editable on double click - Angularjs

This question has been asked multiple times, but I think the scenario here is a little different, I am trying to follow accepted answer in this question. Unlike here my data are fetched from an api and I cannot add a property as such item.editing to the data. I tried passing object/event to the function but this wouldn't be angular way of solving it I suppose. 

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
    }, {
        name: "item #2",
    }, {
        name: "item #3",
    }];
       
    $scope.editItem = function (obj) {
        obj.target.setAttribute("ng-hide", true);
        // doing something like? but this wouldn't be angular way
		//obj.target.next().setAttribute('ng-show', false);
    }

    $scope.doneEditing = function (item) {
		obj.target.setAttribute("ng-show", false);
        //obj.target.previous().setAttribute("ng-hide", false);
    };
}
.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
        <table>
        <tr ng-repeat="item in items">
            <td>
            <!-- How to do this Angular way? Instead of giving ng-hide as false statically, give some parameter to it, which can be modified from functions editItem, and doneEditing -->    
                <span ng-hide="false" ng-dblclick="editItem($event)">{{item.name}}</span>
                <input ng-show="false" ng-model="item.name" ng-blur="doneEditing($event)" autofocus />
            </td>
        </tr>
        </table>
</div>

on fiddle

Upvotes: 1

Views: 2838

Answers (1)

Diptox
Diptox

Reputation: 1809

Try this one Demo

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
    }, {
        name: "item #2",
    }, {
        name: "item #3",
    }];

    $scope.editItem = function (obj) {
        console.log(obj.target);
        obj.target.setAttribute("contenteditable", true);
        obj.target.focus();
        // doing something like? but this wouldn't be angular way
        //obj.target.next().setAttribute('ng-show', false);
    }
}

Upvotes: 3

Related Questions