Question

根据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>

实时版本在此处：http://plnkr.co/edit/05IBKp6aVoj1SqFNi5JJ

我的问题在于此代码行：

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

我的目标是删除父li。

问题：

如何才能做到这一点？
当我使用this关键字（在controller.change函数中）时，这是否可以与JQuery语法一起使用？像$(this).parent().remove();？

Answer 1

您可以从$ 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);
      }

Answer 2

请看看这个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>

Remove li by passing the $event.

Answer 3

请进行以下更改。

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);
 }

Que.2

您可以使用jqLite和指令。

执行此操作

Answer 4

更改：

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(); 
};

Answer 5

我假设您正在尝试实施简单的清单功能。

您可以传递onChange函数的$ index，然后使用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>

我还添加了撤消功能，以帮助您更清晰地了解拼接功能。

添加超时功能只是在删除复选框之前显示复选框。

AngularJS：删除父元素

问题：

5 个答案: