angularjs - example - ng-repeat array

Edición en línea de AngularJS dentro de ng-repeat

Question

Estoy trabajando con AngularJS para mostrar una tabla de teclas de aplicación (identificadores de aplicación) y me gustaría usar un botón de edición para mostrar un formulario pequeño en esa fila de la tabla. Luego el usuario puede editar los campos y hacer clic en "guardar" o "cancelar"

Demostración: http://jsfiddle.net/Thw8n/

Tengo la forma en línea funcionando muy bien. Hago clic en editar y aparece un formulario. Cancelar funciona muy bien también.

Mi problema es

1. ¿Cómo conecto el botón de guardar con una función que hará una llamada $ http a una API?
2. ¿Cómo obtengo los datos de esa fila para enviarlos a la llamada $ http?
3. ¿Cómo deshabilito editMode una vez que la llamada vuelve?

Aquí está el código real que estoy usando en mi controlador (en el JSFiddle no puedo hacer la llamada http). El primer $ http completa el formulario, la función editAppKey es lo que se llama con el botón Guardar.

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.");
});
}
}

Answer 1

Cuando presionamos el botón "Editar" y cambiamos uno de los campos, también cambiamos nuestras principales appkeys modelo. Significa que en "Cancelar" necesitamos restaurar el modelo antiguo.

Significa que necesitamos al menos:

Así que esto es un fragmento de 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>

Y nuestro controlador:

 $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

[EDITAR]

Si desea editar varias filas a la vez, use la matriz de newFields lugar de $scope.newField

Answer 2

En caso de que alguien necesite edición múltiple a la vez:

Solo haz lo siguiente:

en el botón de cancelación de html, pase el índice index data-ng-click="editMode = false; cancel($index)"

en el lado JS:

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

2) dentro de la función editAppKey , $scope.newField = angular.copy(field); a $scope.newField[$scope.editing] = angular.copy(field);

3) cambiar la función saveField a:

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

4) cambiar la función de cancel a:

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

Fiddle

Answer 3

Puede pasar, por ejemplo, el índice actual como un parámetro a la función editAppKey ():

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

y en el archivo JS:

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

en cuanto a la desactivación una vez que la solicitud está de vuelta. Si lo comprendo, desea permitir solo una edición de tiempo y después de llamar a editAppKey () una vez en una fila, desactívela, ¿verdad? Si es así, tal vez algo como

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

y en la función editAppKey (), algo como

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