ng-repeat 中的 AngularJS 内联编辑 [英] AngularJS inline edit inside of ng-repeat

问题描述

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

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

我有很好的内联表单.我单击编辑并出现一个表单.取消也很好用.

我的问题是

1. 如何将保存按钮与一个可以对 API 进行 $http 调用的函数连接起来
2. 如何从该行获取数据以发送到 $http 调用?
3. 如何在来电后禁用 editMode?

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

function AppKeysCtrl($scope, $http, $location) {$http({方法:'POST'，url: 'http://' + $location.host() + ':1111/sys/appkey/save',数据: {//我如何获取数据?}}).成功(功能(数据，状态，标题，配置){$scope.appkeys = 数据；}).错误(功能(数据，状态，标题，配置){$scope.appkeys = [{ "appkey" : "ERROR", "name" : "ERROR", "created" : "ERROR" }];});$scope.editAppKey = function() {$http({方法:'POST'，网址:'http://' + $location.host() + ':1111/sys/appkeys'}).成功(功能(数据，状态，标题，配置){alert("成功！");$scope.editMode = false;}).错误(功能(数据，状态，标题，配置){alert("出现错误.");});}}

解决方案

当我们按下编辑"按钮并更改字段之一时，我们也会更改我们的主模型 appkeys.这意味着在取消"时我们需要恢复旧模型.

这意味着我们至少需要:

这是一段 HTML 代码:

 <button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">编辑</button><button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; saveField()" class="btn btn-default">保存</button><button type="submit" data-ng-show="editMode" data-ng-click="editMode = false;cancel()" class="btn btn-default">取消</button></td>

还有我们的控制器:

 $scope.newField = {};$scope.editing = false;$scope.appkeys = [{ "appkey" : "0123456789", "name" : "我的新应用密钥", "created" : tmpDate },{ "appkey" : "abcdefghij", "name" : "别人的应用密钥", "created" : tmpDate }];$scope.editAppKey = 函数(字段){$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;}};

演示 小提琴

我想一次编辑几行，使用 newFields 数组代替 $scope.newField

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

这篇关于ng-repeat 中的 AngularJS 内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！