How to manipulate DIV with Angularjs

Asked

Viewed 708 times

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

  • I suggest you speak a [tour] to better understand how the site works :)

  • An example code. Then on the box1 you have 2 buttons that will hide the box1 and show the box2 or box3. And on the other div show the box1

  • @Anderssonos welcome to the forum, you want to show/hide a div according to the button clicked, right? This is possible with Jquery, if so, I can leave an example as answer for you.

  • @Jorge Is it only possible to do it in Jquery? In angular it is not possible? I was using ng-if but I cannot manipulate the Divs in clicks functions.

2 answers

1


You can use ng-show 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>
<div ng-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>

That way, the control is in the controller of Angularjs as in the example, so there is flexibility as to behavior.

  • Exactly that, but my Content Div would have a grid with records the content div 2 would be the Include Div and the content div 3 to change. Then when clicking the button function would have to hide the content div and only show again when clicking the button back hidden to the current div.

  • I edited @Anderssonos, see if that’s it

  • Perfect! Exactly that. Thank you.

  • You are welcome. If the answer was the solution, you can mark as accepted @Anderssonos

0

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

See this example taken w3schools:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-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 boolean return.

Browser other questions tagged angularjs

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