20

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

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

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

我的问题是

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

这是我在控制器中使用的实际代码（在 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, 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.");
        });
    }
}
4

3 回答 3

23

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

于 2013-11-11T21:55:14.913 回答
4

您可以将当前索引作为参数传递给 editAppKey() 函数：

... data-ng-click="editAppKey($index)"

并在 JS 文件中：

$scope.editAppKey = function(index) {
    window.console.log(appkeys[index]); // do what ever you want
}

至于请求返回后的禁用。如果我不明白，您只想允许一次编辑，并且在某行上调用一次 editAppKey() 之后，禁用它，对吗？如果是这样，也许像

<button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true" class="btn btn-default"
data-ng-disabled="entry.isDisabled">Edit</button>

在 editAppKey() 函数中，类似

$scope.editAppKey = function(index){
 $http.post(url, data).onsuccess(function(){
    $scope.appkeys[index].isDisabled = true; 

 });
于 2013-11-11T20:46:43.323 回答
2

如果有人需要一次进行多次编辑：

只需执行以下操作：

在 html 取消按钮上，传递索引 data-ng-click="editMode = false; cancel($index)"

在 JS 方面：

1)$scope.newField = {};到$scope.newField = [];

2）内部editAppKey函数，$scope.newField = angular.copy(field);到$scope.newField[$scope.editing] = angular.copy(field);

3）将saveField功能更改为：

$scope.saveField = function(index) {
        $scope.appkeys[$scope.editing] = $scope.newField;
   };

4）将cancel功能更改为：

$scope.cancel = function(index) {
        $scope.appkeys[index] = $scope.newField[index];
        $scope.editing = false;
   };

小提琴

于 2015-08-10T09:21:09.343 回答