AngularJS内联编辑ng-repeat内部

Question

我正在使用AngularJS来显示应用程序密钥表(应用程序标识符),我想使用编辑按钮在该表行中显示一个小表单.然后用户可以编辑字段并单击"保存"或"取消"

演示:http://jsfiddle.net/Thw8n/

我的内联表格非常好用.我单击编辑并显示一个表单.取消也很有效.

我的问题是

1. 如何将保存按钮与将对API进行$ http调用的函数连接
2. 如何从该行获取数据以发送到$ http调用？
3. editMode一旦通话回来,我该如何禁用？

这是我在我的控制器中使用的实际代码(在JSFiddle我无法进行http调用).第一个$ http填写表单,editAppKey函数由save按钮调用.

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

当我们按下"编辑"按钮并更改其中一个字段时,我们也会更改主模型appkeys.它意味着在"取消"我们需要恢复旧模型.

它的意思是我们至少需要:

所以这是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>

我们的控制器:

      $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;
    }       
};

演示 Fiddle

[编辑]

我想一次编辑几行,newFields而是 使用数组$scope.newField