19

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.");
        });
    }
}
Improve this question
1
  • 1
    Do not create any request inside controller. You have factories for that. Commented Nov 11, 2013 at 22:52

3 Answers 3

Reset to default
23

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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I'm still working on this, that's why I haven't accepted an answer yet. But I wanted to thank you for the angular.copy() I was jumping through hoops to find a different way.
I'm having a problem in which I need to open only one row at a time while editing.Here I'm able to open both rows at the same time.How can I avoid it?
@forgottofly on focus lost switch state
@maxim how will we do some input validation on save click and prevent save when when something fail
@Yogesh wrap input with <form> and use $error. here some example: plnkr.co/edit/81jgWv
|
4

You can pass e.g. current index as a parameter to the editAppKey() function:

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

and in the JS file:

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

as for the disabling once the request is back. If I undestand, you want to allow only one time edit and after editAppKey() is called once on some row, disable it, right? If so, maybe something like

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

and in the editAppKey() function, something like

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

 });
Improve this answer

1 Comment

I'm having a problem in which I need to open only one row at a time while editing.Here I'm able to open both rows at the same time.How can I avoid it?
2

In case someone need multiple edit at once:

Just do the following:

on html cancel button, pass the index data-ng-click="editMode = false; cancel($index)"

on JS side:

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

2) inside editAppKey function, $scope.newField = angular.copy(field); to $scope.newField[$scope.editing] = angular.copy(field);

3) change the saveField function to:

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

4) change the cancel function to:

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

Fiddle

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.