AngularJS встроенное редактирование внутри ng-repeat

Im работает с AngularJS для отображения таблицы клавиш приложения (идентификаторов приложений), и я хотел бы использовать кнопку редактирования, чтобы отобразить небольшую форму в этой строке таблицы. Затем пользователь может редактировать поля и нажать "сохранить" или "отменить"

Демо: http://jsfiddle.net/Thw8n/

У меня встроенная форма работает отлично. Я нажимаю кнопку "Редактировать" и появляется форма. Отмена отлично работает.

Моя проблема

  • Как подключить кнопку сохранения с помощью функции, которая сделает вызов $http в API
  • Как мне получить данные из этой строки для отправки на вызов $http?
  • Как отключить editMode после возврата вызова?

Вот фактический код, который я использую в своем контроллере (в JSFiddle Im не удается выполнить 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.");
        });
    }
}

Ответы

Ответ 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" 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

[EDIT]

Я хочу отредактировать сразу несколько строк, вместо этого используйте массив newFields $scope.newField

Ответ 2

Вы можете передать, например. текущий индекс как параметр функции 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; 

 });

Ответ 3

В случае, если кому-то потребуется сразу несколько изменений:

Просто выполните следующие действия:

на кнопке отмены 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;
   };

Fiddle

Ответ 4

Вы можете попробовать для этого ng-inline-edit