$（this）.parent（）。remove（）in angularjs版本

我是AngularJS中的一名新成员。我想做一些非常类似于jquery的语法去除父div的东西。喜欢的东西：

$(this).parent().remove()

我的整个代码是目前：

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <body> 

     <div ng-app="myApp" ng-controller="myCtrl"> 
      First Name: <input type="text" ng-model="firstName"><br> 
      Last Name: <input type="text" ng-model="lastName"><br> 
      <br> 
      Full Name: {{firstName + " " + lastName}} 

      <div> 
      <button ng-click="Sample()">DEAN</button> 
      </div> 
     </div> 

     <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.firstName = "John"; 
      $scope.lastName = "Doe"; 
      $scope.Sample = function(){ 
       $(this).parent().remove() 
      }; 
     }); 

     </script> 

    </body> 
</html>

来源

2016-02-29 Dean Christian Armada

要隐藏在点击该按钮外部？ –

你想要删除什么？ –

我想要这个div元素作为父按钮来移除按钮。由于该div将被删除，该按钮也将被删除 –

更改您这样的代码：

<!DOCTYPE html> 
<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <body> 

     <div ng-app="myApp" ng-controller="myCtrl"> 
      First Name: <input type="text" ng-model="firstName"><br> 
      Last Name: <input type="text" ng-model="lastName"><br> 
      <br> 
      Full Name: {{firstName + " " + lastName}} 

      <div> 
      <button ng-click="Sample($event)">DEAN</button> 
      </div> 
     </div> 

     <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.firstName = "John"; 
      $scope.lastName = "Doe"; 
      $scope.Sample = function(event){ 
       angular.element(event.target).parent().remove(); 
      }; 
     }); 

     </script> 

    </body> 
</html>

变化：

添加$事件参数：

<button ng-click="Sample($event)">DEAN</button>

和更新您的样品（）函数：

$scope.Sample = function(event){ 
    angular.element(event.target).parent().remove(); 
};

来源

2016-02-29 07:36:26 MBN

完美答案！谢谢！ –

欢迎您:) – MBN

该事件语法是否也适用于其他jquery函数？像.find（）或.text（）？ –

要实现捆绑一些视图元素上的任何逻辑Angular你需要创建专用directive适当的功能。

例如：

angular.module('myApp', []) 
 
    .directive('buttonToRemove', function() { 
 
     return { 
 
     restrict: 'AE', 
 
     scope: {}, 
 
     template: '<div><button ng-click="sample()">DEAN</button></div>', 
 
     link: function(scope, element, attrs, fn) { 
 
      scope.sample = function() { 
 
       element.remove(); 
 
      } 
 
     } 
 
     }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="myApp"> 
 
    <button-to-remove /> 
 
</html>

PS：它会更容易为你指定templateUrl并保留布局此按钮分隔的文件，而不是保持所有相关的标记以字符串格式指向该指令。

来源

2016-02-29 07:32:11

在HTML DOM

<div remove-on-click> 
     <button ng-click="Sample()">DEAN</button> 
</div>

的controlloler

app.directive('removeOnClick', function() { 
    return { 
     link: function($scope, element, attrs) { 
      $scope.Sample= function() { 
       element.html(''); 
      }; 
     } 
    } 
});

来源

2016-02-29 07:37:13 Banik

$（this）.parent（）。remove（）in angularjs版本

回答

相关问题