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;


}

Answer 1

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');
    }