how to edit text of row in angular js?

Question

could you please tell me how to edit text of row in angular js.I make a demo in which I create a row dynamically when again I am editing it name of row.But my function not working why ?

here is my code http://codepen.io/anon/pen/KpwzGP Follow this steps.

click the bottom icon left bottom .It show pop up screen write anything and press **add*.It generate a row.when you click edit button it show again a pop up with fill values button when I again press "add" button it should edit or change the text of row .

can we change the text of button also mean while case edit button name is "save"

$scope.showPopup = function() { $scope.data = {}

    // An elaborate, custom popup
    var myPopup = $ionicPopup.show({
        template: '<input type="text" ng-model="data.testcase" style="border: 1px solid red" autofocus>',
        title: 'Enter Add Test case',
        subTitle: 'Add Test case name',
        scope: $scope,
        buttons: [
            { text: 'Cancel' },
            {
                text: '<b>Add</b>',
                type: 'button-positive',
                onTap: function(e) {
                    if (!$scope.data.testcase) {
                        //don't allow the user to close unless he enters wifi password
                        e.preventDefault();
                    } else {
                        return $scope.data;
                    }
                }
            },
        ]
    });
    myPopup.then(function(res) {
        console.log('Tapped!', res);

        if(typeof res!='undefined' && !$scope.iseditDone) {
            res.edit="ion-edit";
            res.close="ion-close";
            $scope.items.push(res)
        }else if($scope.iseditDone){

        }

        console.log($scope.items);
    });
   /* $timeout(function() {
        myPopup.close(); //close the popup after 3 seconds for some reason
    }, 3000);*/
};
$scope.addTestCase=function(){
    $scope.showPopup();
}
$scope.editRow=function(row){
    //alert(row.testcase)
    $scope.data.testcase=row.testcase;
  //  alert($scope.data.testcase)
    $scope.showPopup();
    $scope.data.testcase=row.testcase;


}

From docs.angularjs.org/api/ng/directive/ngRepeat, you could use $index and pass it to the function as the index of the item you'd like to edit or remove in your data model. — Hypaethral
– Hypaethral, Commented Apr 26, 2015 at 0:48
ok i will try could you please use code pen to solve problem — Shruti
– Shruti, Commented Apr 26, 2015 at 0:51
It took me a while to figure out what was going on, but I think I've got it for you codepen.io/anon/pen/GJgZwX... There was another bug with your code, which was the $scope.iseditDone variable never got set back to false (so trying to add a new item ended up editing the old one!) Fixed that too.. Delete works, as well — Hypaethral
– Hypaethral, Commented Apr 26, 2015 at 1:11
Hey I missed one of your questions, which was "how to get the button text to change". I've updated the answer to help you out with that, too :) — Hypaethral
– Hypaethral, Commented Apr 26, 2015 at 1:44

Hypaethral · Accepted Answer · 2015-04-26 01:49:47Z

Updated codepen: http://codepen.io/anon/pen/GJgZwX

The issue with your code was figuring out where in $scope.items to edit. Send $index to your edit function, using it as an index into $scope.items for later. Also, the iseditDone variable needs to be set back to false to allow the adding of new items after an edit. Happy coding!

Here are the changed snippets:

(partial) JS:

   //. . . .
   //initiatlize itemToEdit
   $scope.itemToEdit = 0;

   //. . . .
   if(typeof res!='undefined' && !$scope.iseditDone) {
       res.edit="ion-edit";
       res.close="ion-close";
       $scope.items.push(res)
   } else if ($scope.iseditDone){
       //we're editing, reset the editDone variable
       $scope.iseditDone = false;
       //use the itemToEdit as an index
       $scope.items[$scope.itemToEdit] = res;
   }

    //. . . .
   $scope.editRow=function(row){
       //set the idedit and itemToEdit variables
       $scope.iseditDone=true;
       $scope.itemToEdit = row
       $scope.showPopup();
   }
   //possible deleterow implementation
   $scope.deleterow=function(row){
       $scope.items.splice(row, 1);
   }

HTML, changing item to $index:

 <a class="item" href="#" ng-repeat="item in items">
           <div class="ionclassestest">
            <i class="icon ion-trash-a"  ng-click="deleterow($index)"></i>
            <i class="icon ion-edit" ng-click="editRow($index)"></i>
            </div>
            {{item.testcase}}
 </a>

Update

Something that I overlooked in your original question was changing the text on the add/edit button based on the appropriate action. One way to do this would be to pass the literal text you'd like on the "action" button to the showPopup function, allowing showPopup to edit the template object appropriately. I've updated the codepen, I did it like this:

//move the literal object you were passing to $ionicPopup.show to a local variable
    var popupObject = {
            title: 'Enter Add Test case',
            subTitle: 'Add Test case name',
            scope: $scope,
    //popupObject truncated, you get the point...
    }

    //when you define showPopup, include the text argument and use
    // it to modify the button text
    $scope.showPopup = function(textForSecondButton) {
        popupObject.buttons[1].text = '<b>' 
                 + textForSecondButton + '</b>'
        $scope.data = {}

        // An elaborate, custom popup
        var myPopup = $ionicPopup.show(popupObject);
    //showPopup truncated, you get the point...
    }

    //include the desired button text as an argument to showPopup
    $scope.addTestCase=function(){
        $scope.showPopup('Add');
    }
    $scope.editRow=function(row){
      $scope.iseditDone=true;
      $scope.itemToEdit = row
      $scope.showPopup('Save');
    }

Collectives™ on Stack Overflow

how to edit text of row in angular js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related