Doubt with ng-if or ng-Ide Angularjs

Asked

Viewed 12,115 times

2

I’m trying to use the directive ng-if to hide a button as soon as I click another but could not find any example and found the documentation unclear, could someone give me an example?? using this case of the button, by clicking a button I hide the other using ng-if

angularjs angularjs-directives

2 answers

6


The directive ng-hide hides the element depending on the output of the expression specified in the attribute.

Example:

<button ng-hide="esconderBotao">Botao 1</button>

Case the variable esconderBotao is declared in scope and is TRUE (or equivalent) the button will be hidden (class . ng-Hide is added to the element).

Another example:

angular.module('App', [])
.controller('ExemploController', ['$scope', function($scope) {
  $scope.esconderBotao1 = false;

  $scope.botao1 = function() {
    alert('Ok!');
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
  <div ng-controller="ExemploController">
    <button ng-click="botao1()" ng-hide="esconderBotao1">Botao 1</button>
    <br /><br />
    <button ng-click="esconderBotao1 = true" ng-show="!esconderBotao1">Esconder botão 1</button>
    <button ng-click="esconderBotao1 = false" ng-show="esconderBotao1">Mostrar botão 1</button>
  </div>
</div>

In the above example, by clicking the "Hide" button, the variable esconderBotao1 (see ng-click) is set to TRUE and button 1 is hidden automatically. By clicking the "Show" button the variable esconderBotao1 is set to FALSE and button 1 is automatically displayed.

Note: If you do not set a value for the variable in the scope the element ng-Hide will not hide the element by default.

2

The ng-if was not made to conceal the div but delete from the code when opening the page, if false a certain code will disappear.

It is right to use the ng-show and the ng-hide to show and hide, example:

<div ng-app="app">
<div ng-controller="MainController">
    <button ng-click="mostrar=!mostrar">Ação</button>
        <div ng-show="mostrar">
             <h3>Hello Word</h3>
        </div>
</div>


angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
       $scope.mostrar = false;
}]);

Jsfiddle

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.