Mostrar y ocultar información AngularJS

publicado por: Anonymous

Estoy intentando mostrar un contenido si le doy click a un titulo y volverlo a ocultar si le vuelvo a dar click, estoy haciendo uso del ng-if, si retiro la linea de $scope.varShowHide =! $scope.varShowHide; obviamente si me muestra el contenido, pero quiero que se vuelva a ocultar.

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>_x000D_
    <body>_x000D_
_x000D_
        <div ng-app="myApp" ng-controller="myCtrl">_x000D_
            <div ng-click="exampleShowHide()">_x000D_
                <h1>mostrar y ocultar informacion</h1>                _x000D_
            </div>_x000D_
            <div ng-if="varShowHide">ACA VA EL TEXTO A MOSTRAR POR EJEMPLO UN ANIMAL O UNA FRUTA</div>_x000D_
_x000D_
        </div>_x000D_
_x000D_
        <script>_x000D_
        var app = angular.module('myApp', []);_x000D_
        app.controller('myCtrl', function($scope) {_x000D_
_x000D_
            $scope.exampleShowHide = function(){_x000D_
                $scope.varShowHide = true;_x000D_
                $scope.varShowHide =! $scope.varShowHide;_x000D_
            }_x000D_
        });_x000D_
        </script>_x000D_
_x000D_
    </body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

Debes declarar tu variable $scope.varShowHide fuera de la función $scope.exampleShowHide ya que al declararla adentro con valor de true y luego asignarle el valor contrario siempre estaría quedando en false.

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>_x000D_
    <body>_x000D_
_x000D_
        <div ng-app="myApp" ng-controller="myCtrl">_x000D_
            <div ng-click="exampleShowHide()">_x000D_
                <h1>mostrar y ocultar informacion</h1>                _x000D_
            </div>_x000D_
            <div ng-if="varShowHide">ACA VA EL TEXTO A MOSTRAR POR EJEMPLO UN ANIMAL O UNA FRUTA</div>_x000D_
_x000D_
        </div>_x000D_
_x000D_
        <script>_x000D_
        var app = angular.module('myApp', []);_x000D_
        app.controller('myCtrl', function($scope) {_x000D_
            $scope.varShowHide = true;_x000D_
            _x000D_
            $scope.exampleShowHide = function(){_x000D_
                $scope.varShowHide =! $scope.varShowHide;_x000D_
            }_x000D_
        });_x000D_
        </script>_x000D_
_x000D_
    </body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *