Question

我在一个页面中有一个与列表视图相同的按钮列表，我想要隐藏点击的特定按钮。

这就是我的尝试。

<input type="button" ng-click="add_item_to_list()" class="add-item-to-list" value="Add This Item" />

$scope.add_item_to_list= function(e) {
    jQuery(this).hide();
};

如何在AngularJS中完成？具体来说就像我们在jQuery中使用this一样吗？

Answer 1

由于您有多个需要相同行为的按钮，因此使用范围变量并不好。考虑使用Angular指令：

＆＃13;

var myApp = angular.module("sa", []);
myApp.directive('clickToHide', function() {
  return {
    link: function(scope, element) {
      element.on("click", function() {
        element.addClass("ng-hide");
      });
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa">


  <input type="button" ng-click="add_item_to_list()" class="add-item-to-list" value="Add This Item 1" click-to-hide />


  <input type="button" ng-click="add_item_to_list()" class="add-item-to-list" value="Add This Item 2" click-to-hide />

</div>

＆＃13;

这样，您根本不必使用jQuery。

注意

来自文档https://docs.angularjs.org/api/ng/function/angular.element

如果jQuery可用，angular.element是jQuery的别名   功能。如果jQuery不可用，angular.element委托给   Angular的内置jQuery子集，名为＆＃34; jQuery lite＆＃34;或 jqLite 。

jqLite是一个微小的，API兼容的jQuery子集，允许使用Angular   以跨浏览器兼容的方式操作DOM。 jqLite   仅实现目标最常用的功能   占地面积很小。

Answer 2

使用ng-hide指令构建的一个非常简单的解决方案：

<input type="button" class="add-item-to-list" value="Add This Item"
       ng-click="add_item_to_list()"
       ng-hide="hideItem" />

$scope.add_item_to_list= function(e) {
    $scope.hideItem = true;
}

如果您在ng-repeat中使用它，请执行以下操作：

<div ng-repeat="item in items">
    <input type="button" class="add-item-to-list" value="Add This Item"
           ng-click="add_item_to_list(item)"
           ng-hide="item.added" />
</div>

$scope.add_item_to_list= function(item) {
    item.added = true;
}

Answer 3

您可以简单地使用ngHide指令

ngHide指令根据expression属性提供的ngHide显示或隐藏给定的HTML元素。

HTML 的

<input type="button" ng-hide="hideDiv" ng-click="add_item_to_list()" class="add-item-to-list" value="Add This Item" />

脚本

$scope.hideDiv= false;
$scope.add_item_to_list= function(e) {
    $scope.hideDiv= true;
}

Answer 4

<input type="button" 
       ng-show="isVisible" 
       ng-click="add_item_to_list()" 
       class="add-item-to-list" 
       value="Add This Item" />

$scope.isVisible = true;

$scope.add_item_to_list= function(e) {
    $scope.isVisible = false;
}

欢呼声

Answer 5

为此你可以使用ng-hide：

<input type="button" ng-hide="hideItem" ng-click="add_item_to_list() hideItem=True" class="add-item-to-list" value="Add This Item" />

这可以像上面一样运行，或者通过在ng-hide参数中包含函数在你的函数中运行。

希望这有帮助

Answer 6

试试这个：

<html>
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 

    <input id="input1" type="button" ng-click="add_item_to_list()" ng-model="name" ng-hide="hideIt" />

<script>
//Module Declaration
var app = angular.module('myApp',['ngMessages']);
//Controller Declaration
app.controller('myCtrl',function($scope){
    $scope.hideIt = false;
    $scope.add_item_to_list = function(){
        $scope.hideIt = true;
    }
});
</script> 
</body> 
</html>

AngularJS ng-click中的this.hide（）

6 个答案:

注意