How to manipulate DIV with angularjs

Question

How to manipulate DIV with angularjs

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have 3 DIVs and would like to manipulate them with buttons. Depending on the button, 2 DIVs will hide and only one will appear.

<div ui-view>
<div class="box1">
   conteudo
   <div>
   <button ng-click="Box2()">Funcao2</button>
   <button ng-click="Box3()">Funcao3</button>
   </div>
</div>
<div class="box-2"
            conteudo
             <div>
            <button ng-click="Voltar()">Voltar</button>
            </div>
</div>
<div class="box-3" >
            conteudo
         <div>
          <button ng-click="Voltar()">Voltar</button>
         </div>
</div>

angularjs

asked by anonymous 08.02.2018 / 18:55

2 answers

0

You can add an ng-model to each button and depending on the value of each button it makes the content appear and disappear.

See this example removed w3schools:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><bodyng-app="">

Keep HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<p>The DIV element will be removed when the checkbox is not checked.</p>
<p>The DIV element will return, if you check the checkbox.</p>

</body>
</html>

ng-if accepts Boolean values, you can pass a function with a Boolean return.

08.02.2018 / 19:21

How can I publish all the git branchs at once to my remote repository in github? Loading login data into another subdomain

score 1 · Accepted Answer

You can use ng-show of angular and display or hide elements when a flag is enabled. Example:

angular.module('teste', []).controller('ctrl', function($scope) {
  $scope.conteudo1 = false;
  $scope.conteudo2 = false;

  $scope.funcao = function(item) {
    if (item == 1) {
      $scope.conteudo1 = true;
      $scope.conteudo2 = false;
    } else if (item == 2) {
      $scope.conteudo2 = true;
      $scope.conteudo1 = false;
    }
  }

  $scope.voltar = function() {
    $scope.conteudo1 = false;
    $scope.conteudo2 = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="teste" ng-controller="ctrl">
  <div class="box1" ng-show="!conteudo1 && !conteudo2">
    conteudo
    <div>
      <button ng-click="funcao(1)">Funcao2</button>
      <button ng-click="funcao(2)">Funcao3</button>
    </div>
  </div>
  <div class="box-2" ng-show="conteudo1">
    conteudo 1
    <div>
      <button ng-click="voltar()">Voltar</button>
    </div>
  </div>
  <div class="box-3" ng-show="conteudo2">
    conteudo 2
    <div>
      <button ng-click="voltar()">Voltar</button>
    </div>
  </div>
</div>

In this way, the control stays in the controller of the AngularJS as in the example, so there is flexibility in the behavior.