AngularJS在线内编辑ng重复

发布时间：2020-12-17 08:07:01 所属栏目：安全来源：网络整理

导读：我使用AngularJS显示应用程序键(应用程序标识符)表，我想使用编辑按钮在该表行中显示一个小表单。然后用户可以编辑字段，然后点击“保存”或“取消” 演示：http://jsfiddle.net/Thw8n/ 我有内联形式很好。我点击编辑并显示一个表单。取消也很好。我的问题

我使用AngularJS显示应用程序键(应用程序标识符)表，我想使用编辑按钮在该表行中显示一个小表单。然后用户可以编辑字段，然后点击“保存”或“取消”

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

我有内联形式很好。我点击编辑并显示一个表单。取消也很好。

我的问题是

>如何使用将对API进行$ http调用的功能连接保存按钮
>如何获取该行的数据发送到$ http呼叫？
>如果调用回来，如何禁用editMode？

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

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,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,config) {
            alert("Success!");
            $scope.editMode = false;
        }).
        error(function(data,config) {
            alert("There was an error.");
        });
    }
}

当我们按“编辑”按钮并更改其中一个字段时，我们也改变了我们的主要模型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" 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(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;
    }       
};

演示Fiddle

[编辑]

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!