个人中心
gpt4 book ai didi

javascript - 如何在点击事件上隐藏 Angular 元素

转载 作者：行者123 更新时间：2023-12-03 04:39:42 25 4
gpt4 key购买 nike

我遇到的情况有点像下面的代码。我在查看购物车页面上有一个删除按钮，按下该按钮时会调用 API 来删除产品，我只是隐藏产品 div 标签以避免最初重新加载页面。如何将多个产品一一隐藏

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>

最佳答案

您可以在 HTML 中包含以下内容:

<h5 ng-hide="hide{{$index}}" ng-click="hide($index)" 
    ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>

现在，您的 hide() 函数将如下所示，

$scope.hide = function(index){
  $scope['hide'+index] = true
}

这应该隐藏点击时的数字。

这是工作示例!

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>

关于javascript - 如何在点击事件上隐藏 Angular 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43138811/

25 4 0
文章推荐： javascript - dojo 根据类名切换 div
文章推荐： javascript - 传递数组中的 Angular 匹配值与页面上循环中的项目
文章推荐： javascript - 如何通过浏览器Javascript控制台触发onchange事件
文章推荐： javascript - Highcharts x 轴上的 31 天
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com