如何在点击事件中隐藏角度元素
[英]How to hide angular element on click event
问题描述
I have a situation somewhat like this below code. 
我在下面的代码中遇到了这种情况。 I have a delete button on view cart page when it is pressed an API is called to delete the product and I just hide the product div tag to avoid page reload initially. 按下查看购物车页面时，我有一个删除按钮，调用了一个API来删除产品，而我只是隐藏产品div标签，以避免最初重新加载页面。 How to hide multiple products one by one 如何一一隐藏多个产品
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.hide = function(){ //WHAT SHOULD GO HERE } });
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl" > <h5 ng-click="hide()" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5> </div> </body> </html>
4 个解决方案
解决方案1
1 已采纳 2017-03-31 10:55:38
You can have following in your HTML: 您可以在HTML中添加以下内容：
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)"
ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>
Now, your hide() function would look like this, 现在，您的hide()函数将如下所示：
$scope.hide = function(index){
$scope['hide'+index] = true
}
That should hide numbers on click. 那应该在点击时隐藏数字。
Here's working example! 这是工作示例！
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.hide = function(index){ $scope['hide'+index] = true } });
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl" > <h5 ng-hide="hide{{$index}}" ng-click="hide($index)" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5> </div> </body> </html>
解决方案2
0 2017-03-31 10:57:45
if you want to hide the product div tag to avoid page reload initially 如果要隐藏产品div标签以避免最初重新加载页面
just get type button without type="submit" ( inside <form></form> ) 只需获取没有type =“ submit”的类型按钮（在<form></form> ）
<button type="submit" > to >>> <button ng-click="hide()"> <button type="submit" >到>>> <button ng-click="hide()">
解决方案3
0 2017-03-31 11:05:38
Update your COntroller like that : 像这样更新您的COntroller：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=[0,1,2,3,4,5,6]
$scope.hide = function(x){
//WHAT SHOULD GO HERE
$scope.list.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in list">{{x}}</h5>
</div>
</body>
</html>
解决方案4
0 2017-03-31 11:17:08
ng-hide is just css(display:none) way hide element. ng-hide只是css（display：none）的隐藏元素。 ng-if is add/remove DOM element. ng-if是添加/删除DOM元素。 (we can see if u hide element, ng-if we can't see). （我们可以看到是否隐藏了元素，ng-如果我们看不到）。
You try remove. 您尝试删除。 Just see the example. 请看示例。
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.data = [0,1,2,3,4,5,6]; $scope.hide = function(index){ // in api call success function $scope.data.splice(index, 1); } });
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl" > <h5 ng-click="hide($index)" ng-repeat="x in data">{{x}}<!-- HOW TO USE ng-hide HERE --></h5> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.