使用Angular删除动态div

时间:2017-03-07 10:10:04

标签: html angularjs

我尝试通过点击删除按钮删除动态添加的div。 为方便起见,我创建了这个小提琴https://jsfiddle.net/y4punqp3/2/

删除功能

$scope.removeUnavailability = function () {
    --numUnavail;
    document.getElementById("tempUnavail").remove();
}

单击“删除”按钮时,应删除相应的行。 我错过了什么?

1 个答案:

答案 0 :(得分:1)

检查更新的小提琴以获得干净的解决方案:https://jsfiddle.net/y4punqp3/5/

在Angular中,您希望控制器中的数据代表模型,并使用模板根据该模型绘制内容。你不想在指令之外以任何方式手动添加/删除HTML或编辑DOM,否则你只是在自己的脚下射击而你并没有真正以任何有意义的方式使用角度

JS:

View.OnClickListener welcomeListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(YourCurrentActivity.this, MainActivity.class);
            startActivity(intent);
        }
    };
    btn.setOnClickListener(welcomeListener);
  }

HTML:

var app = angular.module("satUnav-app", []);
app.controller("satUnav-ctrl", function($scope) {

  $scope.unavailabilities = [];

  $scope.addUnavailability = function () {
    $scope.unavailabilities.push({});
  }

  $scope.removeUnavailability = function (idx) {
    $scope.unavailabilities.splice(idx, 1);
  }
});

现在我们有了很好的干净的Angular代码,只需编辑基于视图绘制的数组范围变量就可以轻松添加/删除div:没有任何愚蠢的DOM操作。

编辑:和这些jQuery-Angular问题一样,请查看答案:https://stackoverflow.com/a/15012542/3368834