Question

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

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.hide = function(){
  //WHAT SHOULD GO HERE
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

您可以在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
}

这应该会在点击时隐藏数字。

以下是工作示例！

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.hide = function(index){
    $scope['hide'+index] = true
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

如果您想隐藏产品div标签最初避免重新加载页面

只需获取不带type =“submit”的类型按钮（在<form></form>内）

<button type="submit" >至＆gt;＆gt;＆gt; <button ng-click="hide()">

Answer 3

更新你的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>

Answer 4

ng-hide只是css（display：none）方式隐藏元素。 ng-if是添加/删除DOM元素。（我们可以看看你是否隐藏元素，ng-如果我们看不到的话）。

您尝试删除。只需看看示例。

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>

如何在点击事件中隐藏角度元素

4 个答案: