为什么行没有删除角度?

时间:2014-08-07 06:08:16

标签: javascript jquery angularjs angularjs-directive

你能告诉我为什么我的行没有被删除。我做了一个演示,其中我添加了学生名。我能够添加学生名。现在我有两个问题我无法删除行和编辑你能告诉我哪里错了吗?

这是我的演示 http://plnkr.co/edit/1lem6t4h7b6Eefsz32t6?p=preview

app.controller("studentcntr",['$scope',function(scope){
    scope.studentDetail=[];

    scope.addStudent=function(){
        bootbox.prompt("Enter Name!",function(res){
            console.log(res);
            if(res==null){

            }else {
                scope.studentDetail.push({ name: res });

            }

            scope.$digest();
        });


    };

    scope.editRowName=function (name) {
      // body...
     // alert(name);
     setTimeout(function() {
      $('.bootbox-input').val(name); 
     }, 10);

    }

     scope.deleteRow=function (id) {
      // body...
      alert('s'+id)
      $('#'+id).remove();
    }





}])

我能够删除行。但问题是,当我删除行并添加新名称时,再次创建删除行为什么?为什么现在永久删除

2 个答案:

答案 0 :(得分:0)

为什么现在永久删除

由于您没有从scope.studentDetail删除它,因此它会持久存在。

更改

HTML

    <td ><button ng-click="editRowName(student)">Edit</button></td>
    <td ><button ng-click="deleteRow($index)" >Delete</button></td>

脚本

scope.editRowName=function (student) {
  bootbox.prompt({
    title: "What is your name?", //Title
    value: student.name, //Pre-filled name
    callback: function(result) {
      student.name = result; //Update name
      scope.$digest();
    }
  });
}

scope.deleteRow=function ($index) {
  scope.studentDetail.splice($index, 1);
}

DEMO

答案 1 :(得分:0)

问题在于您是从DOM中删除元素而不是从数据模型中删除..

http://plnkr.co/edit/a4WLy1ckQHT68uz1CGeh?p=preview

它适用于编辑和删除。

<td><button ng-click="editRowName($index, student.name)">Edit</button></td>
<td><button ng-click="deleteRow($index)" >Delete</button></td>

并在控制器中

scope.editRowName=function (index, name) {
    scope.currentIndex = index;

   bootbox.prompt("Enter New name for " + name,function(res){
        console.log(res);

        if(res==null){

        }else {
          if (scope.currentIndex === -1) {
            scope.studentDetail.push({ name: res });
          } else {
            scope.studentDetail[scope.currentIndex].name = res;
            scope.currentIndex = -1;
          }

        }

        scope.$digest();
    });

}

 scope.deleteRow=function (id) {
  scope.studentDetail.splice(id, 1);
}