1

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.

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

        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-click="exampleShowHide()">
                <h1>mostrar y ocultar informacion</h1>                
            </div>
            <div ng-if="varShowHide">ACA VA EL TEXTO A MOSTRAR POR EJEMPLO UN ANIMAL O UNA FRUTA</div>

        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {

            $scope.exampleShowHide = function(){
                $scope.varShowHide = true;
                $scope.varShowHide =! $scope.varShowHide;
            }
        });
        </script>

    </body>
</html>

1 respuesta 1

4

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.

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

        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-click="exampleShowHide()">
                <h1>mostrar y ocultar informacion</h1>                
            </div>
            <div ng-if="varShowHide">ACA VA EL TEXTO A MOSTRAR POR EJEMPLO UN ANIMAL O UNA FRUTA</div>

        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.varShowHide = true;
            
            $scope.exampleShowHide = function(){
                $scope.varShowHide =! $scope.varShowHide;
            }
        });
        </script>

    </body>
</html>

1
  • 1
    Es bueno aclarar que ngIf crea un child scope que seria innecesario para este escenario. Recomendaría utilizar ngShow.
    – Einer
    Commented el 12 ene. 2018 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.