$（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版本

回答

相關問題