AngularJS inline edit inside of ng-repeat

Question

Im working with AngularJS to display a table of app keys (app identifiers) and I would like to use an edit button to display a small form in that table row. Then the user can edit the fields and click "save" or "cancel"

Demo: http://jsfiddle.net/Thw8n/

I have the inline form working great. I click edit and a form appears. Cancel works great too.

My problem is

1. How do I connect the save button with a function that will make a $http call to an API
2. How do I get the data from that row to send to the $http call?
3. How do I disable editMode once the call comes back?

Here is the actual code Im using in my controller (in the JSFiddle Im not able to make the http call). The first $http fills out the form, the editAppKey function is what is called by the save button.

function AppKeysCtrl($scope, $http, $location) {
    $http({
        method: 'POST', 
        url: 'http://' + $location.host() + ':1111/sys/appkey/save',
        data: { 
             // How do I get the data?
        }
    }).
    success(function(data, status, headers, config) {
        $scope.appkeys = data;
    }).
    error(function(data, status, headers, config) {
        $scope.appkeys = [{ "appkey" : "ERROR", "name" : "ERROR", "created" : "ERROR" }];
    });

    $scope.editAppKey = function() {
        $http({
            method: 'POST', 
            url: 'http://' + $location.host() + ':1111/sys/appkeys'
        }).
        success(function(data, status, headers, config) {
            alert("Success!");
            $scope.editMode = false;
        }).
        error(function(data, status, headers, config) {
            alert("There was an error.");
        });
    }
}

Answer 1

When we press on "Edit" button and change one of fields , we also change our main model appkeys. Its mean that on "Cancel" we need restore old model.

Its mean that we need at least:

So this is a snippets of HTML:

       <td>
            <button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">Edit</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; saveField()" class="btn btn-default">Save</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
        </td>

And our controller:

      $scope.newField = {};
      $scope.editing = false;

 $scope.appkeys = [
     { "appkey" : "0123456789", "name" : "My new app key", "created" : tmpDate },
     { "appkey" : "abcdefghij", "name" : "Someone elses app key", "created" : tmpDate }
 ];

$scope.editAppKey = function(field) {
    $scope.editing = $scope.appkeys.indexOf(field);
    $scope.newField = angular.copy(field);
}

$scope.saveField = function() {
    if ($scope.editing !== false) {
        $scope.appkeys[$scope.editing] = $scope.newField;
        $scope.editing = false;
    }       
};

$scope.cancel = function() {
    if ($scope.editing !== false) {
        $scope.appkeys[$scope.editing] = $scope.newField;
        $scope.editing = false;
    }       
};

Demo Fiddle

[EDIT]

I you want to edit several rows at once, use array of newFields instead $scope.newField

Answer 2

You can pass e.g. current index as a parameter to the editAppKey() function:

... data-ng-click="editAppKey($index)"

and in the JS file:

$scope.editAppKey = function(index) {
    window.console.log(appkeys[index]); // do what ever you want
}

as for the disabling once the request is back. If I undestand, you want to allow only one time edit and after editAppKey() is called once on some row, disable it, right? If so, maybe something like

<button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true" class="btn btn-default"
data-ng-disabled="entry.isDisabled">Edit</button>

and in the editAppKey() function, something like

$scope.editAppKey = function(index){
 $http.post(url, data).onsuccess(function(){
    $scope.appkeys[index].isDisabled = true; 

 });

Answer 3

In case someone need multiple edit at once:

Just do the following:

on html cancel button, pass the index data-ng-click="editMode = false; cancel($index)"

on JS side:

1) $scope.newField = {}; to $scope.newField = [];

2) inside editAppKey function, $scope.newField = angular.copy(field); to $scope.newField[$scope.editing] = angular.copy(field);

3) change the saveField function to:

$scope.saveField = function(index) {
        $scope.appkeys[$scope.editing] = $scope.newField;
   };

4) change the cancel function to:

$scope.cancel = function(index) {
        $scope.appkeys[index] = $scope.newField[index];
        $scope.editing = false;
   };

Fiddle