logo标签列表

AngularJS：删除父元素

javascriptangularjs
3

我有一个 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>

Live 版本在这里：http://plnkr.co/edit/05IBKp6aVoj1SqFNi5JJ

我的问题出现在这行代码中：

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

我的目标是删除父级li元素。

问题：

  1. 如何正确实现？
  2. 当我在控制器的change函数中使用this关键字时，是否可以使用JQuery语法来操作它？类似于$(this).parent().remove();这样的语法？
是的，您可以使用jQuery语法。 - ashfaq.p
对我不起作用。在此处查看实时版本：http://plnkr.co/edit/kQaSALQukbPv5Cerh8yr - No1Lives4Ever
1
请现在检查此链接：http://plnkr.co/edit/ElFt3Qvkr17M4audr3ev?p=preview。它已经可以工作了。 - ashfaq.p
5个回答
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>

并且在JS中

$scope.change = function(item) {
           // Work is done. remove the caller checkbox.
           var index = $scope.items.indexOf(item);
           $scope.items.splice(index, 1);
      }
只需在更改事件中传递索引即可，为什么要重新计算呢？ - Saksham
4
请看这个plunker，我用ng-click检测变化，并将$event作为参数传递。
<!doctype html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
   <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
    var app = angular.module('myapp', []);
    app.controller('mainController', function($scope) {
      $scope.items = ["item1", "item2", "item3"];
      $scope.change = function(e) {
            // My work here.
            // ...
            console.log($(this));
            console.log(e.target);
            // Work is done. remove the caller checkbox.
            $(e.target).parent().remove(); // Not working
      }
    });     
 </script>  
</head>
<body ng-app="myapp">
 <div ng-controller="mainController">
<ul>
  <li ng-repeat="item in items">
    <input type="checkbox" ng-model="checked" ng-click="change($event)">
  </li>
</ul>
</div>
 </body>
 </html>

通过传递 $event 来移除 li。

3
请执行以下更改。
HTML：
```html

请执行以下更改。

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

JS.

  $scope.change = function(index) { 
         $scope.items.splice(index, 1);
 }

问题2

您可以使用jqLite和指令来完成此操作。

3

已更改：

HTML：

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

js:

$scope.change = function (e) {             
    angular.element(e.target).parent().remove(); 
};
1
我假设您正在尝试实现一个简单的清单功能。您可以将$index传递给onChange函数，然后使用array.splice()方法执行以下操作。
      <!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,$timeout) {
                $scope.items = ["item1", "item2", "item3"];
                $scope.prevItem ={
                    value: null,
                    index: null
                }
                $scope.change = function(index) {
                 $timeout(function(){
                  // Your work here.
                  $scope.prevItem.value = $scope.items[index];
                  $scope.prevItem.index = index;
                  $scope.items.splice(index, 1);
                 }, 300);
               }
               $scope.undoCheck = function(){
                $scope.items.splice($scope.prevItem.index, 0, $scope.prevItem.value);
               }
              });     
        </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($index)">
              {{item}}
            </li>
          </ul>
          <button ng-click="undoCheck()">Undo Previous Check</button>
        </div>
      </body>
      </html>

我还添加了撤销功能，只是为了帮助您更清楚地了解splice函数。
timeout函数被添加，只是为了在删除复选框之前显示其检查。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接