chou chou - 1 month ago 7
AngularJS Question

addClass hidden from ng-click angularJS

Here is my code HTML :

<button type="button" ng-click="save()" class="btn btn-success btn-block"><span class="glyphicon glyphicon-save"></span>Enregistrer</button>


I want to make the button hidden by adding class hidden from the HTML element, like it is done with JQUERY and backbone:

$('a[data-actions="save"]').addClass('hidden')


I have tried this :

angular.element($scope.save)


but it didn't work, inspite it works if I use the html ID, like this one :

var tempItem = document.getElementById('name');
angular.element(tempItem)
.addClass('hidden');

Answer

Please use data to alter the appearance in form of show/hide.

ng-show and ng-hide are good for this. And sometimes ng-if also comes handy if the hidden or to-be hidden element are heavy in terms of DOM.

angular.module('app', [])
  .controller('MyController', function($scope) {

    $scope.save = function() {
      $scope.shown = !$scope.shown;

    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyController">
  <p ng-show="shown">Hello World</p>
  <button type="button" ng-click="save()" class="btn btn-success btn-block"><span class="glyphicon glyphicon-save"></span>Enregistrer</button>
</div>