Question

190

How to make a double click editable table in AngularJS way?

rated 0 times [ 197] [ 7] / answers: 1 / hits: 22618 / 10 Years ago, sat, february 15, 2014, 12:00:00

Without DOM manipulation, how to make an editable table cell with double click?

I am trying to make it there http://jsfiddle.net/bobintornado/F7K63/35/?

my controller code is below

function myCtrl($scope) {



    $scope.items = [{

        name: item #1,

        editing: 'readonly'

    }, {

        name: item #2,

        editing: 'readonly'

    }, {

        name: item #3,

        editing: 'readonly'

    }];



    $scope.editItem = function (item) {

        item.editing = '';

    };



    $scope.doneEditing = function () {

        //dong some background ajax calling for persistence...

    };

}

However I am facing questions to make input element readonly and submit the input (on enter pressed event fire up the ajax call to consume some Restful service for updating backend server)

Many thank if anyone could share their wisdom!

PS: I think the editable table of data browser in Parse.com is the best demonstration I can get but I have no clues regarding how to implement it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

View All

answered 11 Years ago clarissakourtneyb · Accepted Answer

I updated the fiddle. Is this how you want to do it?

HTML

<tr ng-repeat=item in items>

    <td>

        <span ng-hide=item.editing ng-dblclick=editItem(item)>{{item.name}}</span>

        <input ng-show=item.editing ng-model=item.name ng-blur=doneEditing(item) autofocus />

    </td>

</tr>

JS

$scope.items = [{name: item #1, editing: false}, 

                {name: item #2, editing: false}, 

                {name: item #3, editing: false}];



$scope.editItem = function (item) {

    item.editing = true;

}



$scope.doneEditing = function (item) {

    item.editing = false;

    //dong some background ajax calling for persistence...

};

However you should probably create a directive containing the editable row. And implement the autofocus there, when you dblclick on an item.