CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
sam
sam

Reputation: 696

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

Upvotes: 0

Views: 2023

Answers (4)

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

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>

Upvotes: 0

Faraz Babakhel
Faraz Babakhel

Reputation: 664

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>

Upvotes: 0

Thailand
Thailand

Reputation: 93

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()">

Upvotes: 0

tanmay
tanmay

Reputation: 7911

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>

Upvotes: 1

Related Questions