当我们美元的编辑按钮p $ PSS和改变的领域之一，我们也改变我们的主力机型 appkeys 。它的意思是取消我们需要恢复旧模式。

它意味着我们至少需要：

因此​​，这是HTML的一个片段：

 ＆LT; TD＆GT;
            ＆LT;按钮式=提交数据-NG-隐藏=编辑模式的数据-NG-点击=编辑模式= TRUE; editAppKey（进入）级=BTN BTN-默认＆gt;编辑＆LT; /按钮＆GT;
            ＆LT;按钮式=提交数据-NG-秀=编辑模式的数据-NG-点击=编辑模式=假级=BTN BTN-默认＆GT;保存＆LT; /按钮＆GT;
            ＆LT;按钮式=提交数据-NG-秀=编辑模式的数据-NG-点击=编辑模式= FALSE;取消（）级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
        ＆LT; / TD＆GT;
 

和我们的控制器：

  $ scope.newField = {};
      $ scope.editing = FALSE; $ scope.appkeys = [
     {的AppKey：0123456789，名：我的新的应用程序键，创造：tmpDate}，
     {的AppKey：ABCDEFGHIJ，名：别人的应用程序键，创造：tmpDate}
 ];$ scope.editAppKey =功能（场）{
    $ scope.editing = $ scope.appkeys.indexOf（场）;
    $ scope.newField = angular.copy（场）;
}$ scope.saveField =功能（指数）{
    如果（$ scope.editing！== FALSE）{
        $ scope.appkeys [$ scope.editing] = $ scope.newField;
        $ scope.editing = FALSE;
    }
};$ scope.cancel =功能（指数）{
    如果（$ scope.editing！== FALSE）{
        $ scope.appkeys [$ scope.editing] = $ scope.newField;
        $ scope.editing = FALSE;
    }
};
 

演示 小提琴 骨节病>

我要一次编辑多个行，请使用 newFields 而不是 $ scope.newField 阵列p>

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.");
        });
    }
}

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" 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(index) {
    if ($scope.editing !== false) {
        $scope.appkeys[$scope.editing] = $scope.newField;
        $scope.editing = false;
    }       
};

$scope.cancel = function(index) {
    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