AngularJS:删除父元素

Question

AngularJS:删除父元素

li根据$scope.items清单,我有重复的项目.在每个li我都有一个复选框.我想要做的是捕获此复选框的更改事件并在那里完成我的工作.执行$scope.change功能.

完成工作后,我想删除已选中复选框的行.

我的代码到目前为止:

<!doctype html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
  <script>
        var app = angular.module('myapp', []);
        app.controller('mainController', function($scope) {
          $scope.items = ["item1", "item2", "item3"];
          $scope.change = function() {
                // My work here.
                // ...

                // Work is done. remove the caller checkbox.
                this.parent.remove(); // <--- BOOM.
          }
        });     
  </script>  
</head>
<body ng-app="myapp">
  <div ng-controller="mainController">
    <ul>
      <li ng-repeat="item in items">
        <input type="checkbox" ng-model="checked" ng-change="change()">
      </li>
    </ul>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

真人版是在这里:http://plnkr.co/edit/05IBKp6aVoj1SqFNi5JJ

我的问题出在这个代码行中:

this.parent.remove(); // <--- BOOM.

Run Code Online (Sandbox Code Playgroud)

我的目标是删除父级li.

问题:

怎么做对吗？
当我使用this关键字(在controller.change函数中)时,这是否可以与JQuery语法一起使用？有点像$(this).parent().remove();？

Answer 1

Zoh*_*jaz 5

您可以从$ scope.items中删除该项目,它将自动删除,您不需要使用jQuery.

我更新了plunker http://plnkr.co/edit/3aYHQspeLAj3VryQAhBT?p=preview

<ul>
  <li ng-repeat="item in items">
    <input type="checkbox" ng-model="checked" ng-change="change(item)">
</li>

Run Code Online (Sandbox Code Playgroud)

在JS中

$scope.change = function(item) {
           // Work is done. remove the caller checkbox.
           var index = $scope.items.indexOf(item);
           $scope.items.splice(index, 1);
      }

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，4 月前
查看次数：	2769 次
最近记录：	10 年，4 月前