2

como puedo ocultar la palabra volver y que se muestre cuando se abre el div que tiene la clase collapse y que se oculte la palabra busqueda, es decir que cuando el div haga collapse, "este open" muestre la palabra volver si no esta open que muestre la palabra búsqueda, tengo el siguiente código

 <!DOCTYPE html> 
 <html ng-app="myApp"> 
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> 
<body>   
    <div ng-controller="myCtrl">
        <ul id="tab-list" class="nav nav-pills tab-menu tabs nav-search">
            <li>
                <a data-toggle="collapse" data-target="#rent-tab">Busqueda avanzada</a>
                <a data-toggle="collapse" data-target="#rent-tab">Volver</a>
            </li>
        </ul>

        <div id="rent-tab" class="collapse">
            <div class="row">
                <div class="col-sm-12">
                <span>Esto es una prueba</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            
        });
    </script>
</body>
</html>

.

1 respuesta 1

5

Podrías hacerlo de la siguiente manera:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> 
<body>   
   <div ng-controller="myCtrl">
       <ul ng-cloak id="tab-list" class="nav nav-pills tab-menu tabs nav-search">
           <li>
               <a data-toggle="collapse" data-target="#rent-tab" ng-click="toggle = !toggle" ng-hide="toggle">Busqueda</a>
               <a data-toggle="collapse" data-target="#rent-tab" ng-click="toggle = !toggle" ng-show="toggle">Volver</a>
           </li>
       </ul>

       <div id="rent-tab" class="collapse" ng-show="toggle">
           <div class="row">
               <div class="col-sm-12">
               <span>Esto es una prueba</span>
               </div>
           </div>
       </div>
   </div>
   <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope) {
       });
   </script>
</body>
</html>

EXPLICACIÓN NG-CLOAK

ng-cloak es una directiva de angular que evita que los elementos tengan un "parpadeo" al cargar la página, cuando se carga el ejemplo se alcanza a apreciar por unos segundos el botón volver y luego se esconde cuando todo termina de cargar correctamente, el ng-cloak se usa para evitar que eso pase.

2
  • 1
    Que bien, justamente lo que necesitaba gracias, un aporte: para que no se vea la palabra volver cuando ejecutas el codigo es bueno ponerle ng-cloak a la etiqueta ul, pero ya lo hice gracias.
    – zerokira
    Commented el 3 nov. 2017 a las 16:08
  • Genial, respuesta editada con tu sugerencia ! :D Commented el 3 nov. 2017 a las 16:23

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.