如何在 angular js 中编辑行的文本？

Question

你能告诉我如何编辑 angular 中行的文本吗 js.I 做一个演示，我在其中动态创建一行，当我再次编辑它的名称 row.But为什么我的功能不起作用？

这是我的代码 http://codepen.io/anon/pen/KpwzGP 按照以下步骤操作。

单击左下角的底部图标。它显示弹出屏幕，写入任何内容并按 **add*。它生成一个 row.when 你单击编辑按钮，它再次显示一个带有填充值按钮的弹出窗口，当我再次按 "add" 按钮，它应该编辑或更改行的文本。

我们可以更改按钮的文本吗也意味着案例编辑按钮名称是 "save"

$scope.showPopup = 函数() { $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

更新代码笔：http://codepen.io/anon/pen/GJgZwX

您的代码的问题是确定在 $scope.items 中编辑的位置。将 $index 发送到您的编辑函数，稍后将其用作 $scope.items 的索引。此外，需要将 iseditDone 变量设置回 false 以允许在编辑后添加新项目。编码愉快！

以下是更改后的片段：

（部分）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，将项目更改为 $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>

更新

我在您最初的问题中忽略的一件事是根据适当的操作更改 add/edit 按钮上的文本。一种方法是将 "action" 按钮上的文字文本传递给 showPopup 函数，允许 showPopup 适当地编辑模板对象。我已经更新了 codepen，我是这样做的：

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

如何在 angular js 中编辑行的文本？

how to edit text of row in angular js?

javascript

angularjs

angularjs-directive

angularjs-scope

ionic-framework