How to hide angular element on click event

Question

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

Possible duplicate of angular Way of: show or hide element after button click — lin
– lin, Commented Mar 31, 2017 at 10:51
On delete click you can remove the item from array then it will not show in the repeater — Aravind Sivam
– Aravind Sivam, Commented Mar 31, 2017 at 10:53
Dear @lin I dont consider this basic ng-hide ng-show question. Its about hiding multiple values with same ng-model. Regards — sam
– sam, Commented Mar 31, 2017 at 10:55
Yea, there are tons of questions with tons of answers to your problem. No need to ask it again. — lin
– lin, Commented Mar 31, 2017 at 10:55

tanmay · Accepted Answer · 2017-03-31 10:55:38Z

1

You can have following in your 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,

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

answered Mar 31, 2017 at 10:55

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thailand · Accepted Answer · 2017-03-31 10:57:45Z

0

if you want to hide the product div tag to avoid page reload initially

just get type button without type="submit" ( inside <form></form> )

<button type="submit" > to >>> <button ng-click="hide()">

answered Mar 31, 2017 at 10:57

Thailand

931 gold badge2 silver badges10 bronze badges

Comments

Faraz Babakhel · Accepted Answer · 2017-03-31 11:05:38Z

0

Update your COntroller like that :

 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>

answered Mar 31, 2017 at 11:05

Faraz Babakhel

6645 silver badges17 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-03-31 11:17:08Z

0

ng-hide is just css(display:none) way hide element. ng-if is add/remove DOM element. (we can see if u hide element, ng-if we can't see).

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>

answered Mar 31, 2017 at 11:17

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to hide angular element on click event

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related