Question

你能否告诉我如何在角度js中编辑行的文本。我做了一个演示，我再次动态创建一行，我正在编辑它的行名称。但是我的功能不起作用为什么？

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

点击左下方的底部图标。显示弹出屏幕写入任何内容并按**添加*。生成一行。当您单击编辑按钮时，再次显示弹出的填充值按钮，当我再次按“添加”时“按钮应该编辑或更改行的文本。

我们可以更改按钮的文本也意味着案例编辑按钮名称“保存”

$ 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

更新了codepen：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>

<强>更新

我在原始问题中忽略的一点是根据相应的操作更改添加/编辑按钮上的文本。一种方法是在＆＃34;动作＆＃34;上传递您喜欢的文字文本。按钮到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');
    }

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

1 个答案: