How to edit the text of a line in angular js?

Could you please tell me how to edit the text of a string in angular js.I do a demo where I dynamically create the string when again I edit its string name. But my function is not working why?

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

click the bottom icon at the bottom left. Display a popup, write something and hit ** add * .It generate a string. When you click the "Edit" button, it will show the popup with fill buttons again, when I click "add" again, it should edit or change the line text.

Can we change the text of the button also means that when the edit button is pressed the filename "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;


}

      

+3


source to share


1 answer


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

The problem with your code was figuring out where in $ scope.items to edit. Submit $ index to your edit function, using it as an index in $ scope.items for a later version. In addition, the iseditDone variable must be set to false to allow the addition of new items after editing. Happy coding!

Below are the modified 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 the element 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 I forgot in your original question is changing the text on the add / edit button based on the corresponding action. One way to do this is to pass the literal text you want to the action button to the showPopup function so that showPopup can edit the template object accordingly. I 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');
    }

      

+1


source







All Articles