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

问题描述

林与AngularJS合作，以显示应用程序键（APP标识符）的表，我想用一个编辑按钮来显示该表行中的一个小的形式。然后，用户可以编辑字段，然后单击保存或取消

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

我有内嵌的形式伟大的工作。我点击编辑和显示形式。取消伟大的作品了。

我的问题是

1. 如何连接与函数保存按钮，这将使$ HTTP调用的API


2. 我如何从该行获得的数据发送到$ HTTP调用？


3. 如何停用编辑模式一旦调用回来？

下面是实际code即时通讯使用在我的控制器（在的jsfiddle我不是能够使HTTP调用）。第一$ HTTP填写表单时，editAppKey功能是由保存按钮调用。

 函数AppKeysCtrl（$范围，$ HTTP，$位置）{
    $ HTTP（{
        方法：POST，
        网址：的http：//+ $ location.host（）+'：1111 / SYS /的AppKey /保存，
        数据：{
             //我如何获得这些数据？
        }
    }）。
    成功（功能（数据，状态，头，配置）{
        $ scope.appkeys =数据;
    }）。
    错误（功能（数据，状态，头，配置）{
        $ scope.appkeys = [{的AppKey：ERROR，名：ERROR，创造：ERROR}];
    }）;    $ scope.editAppKey =功能（）{
        $ HTTP（{
            方法：POST，
            网址：的http：//+ $ location.host（）+'：1111 / SYS / appkeys
        }）。
        成功（功能（数据，状态，头，配置）{
            警报（成功！）;
            $ scope.editMode = FALSE;
        }）。
        错误（功能（数据，状态，头，配置）{
            警报（发生错误。）;
        }）;
    }
}
 

解决方案

当我们美元的编辑按钮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

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

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