0

Tengo una web con preguntas que se cargan con Angular JS. Estas preguntas tienen título, respuesta y tema al que pertenecen. Quiero incluir una opción para poder navegar entre temas, por un lado haciendo click en anterior y siguiente, y por otro lado pudiendo seleccionar con unos botones a qué tema quieres ir.

Código HTML:

<div ng-app="preguntas" ng-controller="controles">
    <div id="izquierda" class="controles">
    </div>
    <div id="derecha" class="controles">
    </div>

    <div class="todasPreguntas">
        <input type="search" ng-model="buscar" id="buscar" placeholder="BUSCAR">
        <p ng-model="search.tema" placeholder="TEMA" >1</p>
        <ul>
            <li ng-repeat="x in names | filter : buscar | filter:search:strict" class="pregunta">
                <h2 class="title">{{x.pregunta}}</h2>
                <p> {{x.respuesta}}</p>
            </li>
        </ul>
    </div>
</div>
0

2 respuestas 2

2

Estuve bastante entretenido haciendo esto hasta que lo logre, te dejo un codepen para que lo veas funcionando Codepen

<button ng-click="anterior();" ng-disabled="anterior_disabled" class="title text-center">Anterior</button>
<button ng-click="siguiente();" ng-disabled="siguiente_disabled" class="title text-center">Siguiente</button>
<br>
<br> Seleccione tema
<select ng-model="tema_select" ng-options="tema as tema.nombre_tema for tema in temas track by tema.nombre_tema">
    <option value="" selected>Todos</option>
</select>
<div ng-repeat="x in names | filter: tema_select.nombre_tema ">
    <h2 class="title">{{x.pregunta}}</h2>
    <p> {{x.respuesta}}</p>
</div>

Controlador :

$scope.names = [{
    pregunta: "¿Pregunta 1?",
    respuesta: "Respuesa 1",
    tema: "tema 1"
}, {
    pregunta: "¿Pregunta 2?",
    respuesta: "Respuesta 2",
    tema: "tema 2"
}, {
    pregunta: "¿Pregunta 3?",
    respuesta: "Respuesta 3",
    tema: "tema 3"
}, ];
$scope.temas = [];
$scope.id = 0;
angular.forEach($scope.names, function(value, key) {
    $scope.temas.push({ nombre_tema: value.tema });
});
$scope.clickButton = function(nombre_tema) {
    $scope.tema_select = { nombre_tema: nombre_tema };
}
$scope.siguiente_disabled = false;
$scope.anterior_disabled = true;
$scope.siguiente = function() {
    $scope.tema_select = { nombre_tema: $scope.temas[$scope.id].nombre_tema };
    $scope.id++;
    if ($scope.id == $scope.temas.length) {
        $scope.siguiente_disabled = true;
        $scope.anterior_disabled = false;
        $scope.id--;
    }
}
$scope.anterior = function() {
    console.log($scope.id);
    $scope.id--;
    $scope.tema_select = { nombre_tema: $scope.temas[$scope.id].nombre_tema };
    if ($scope.id == 0) {
        $scope.anterior_disabled = true;
        $scope.siguiente_disabled = false;
        $scope.id++;
    }
}

Para que funcionara lo primero que hice fue hacer un arreglo de preguntas que contienen Pregunta, respuesta y un tema. Luego hice un arreglo $scope.temas donde separo del arreglo principal solo los temas.

Creo un <select> para ir filtrando por tema con un ng-repeat y haciendo opciones.

<select ng-model="tema_select" ng-options="tema as tema.nombre_tema for tema in temas track by tema.nombre_tema">
  <option value="" selected>Todos</option>
</select>

Luego al <div> que repito las publicaciones les agregue el filtro del ng-model del selector.

<div ng-repeat="x in names | filter: tema_select.nombre_tema ">
  <h2 class="title">{{x.pregunta}}</h2>
  <p> {{x.respuesta}}</p>
</div>

Despues trabaje en los botones, como cree un arreglo temas cada tema tiene un indice, en este caso temas[0] = 'tema_1 y asi con los demas en caso que hubieran (yo agregue solo 3). Entonces cree una variable $scope.id = 0 que sera el indice de este arreglo. Cuando haces click en el boton Siguiente este busca en el arreglo temas el indice por el valor de $scope.id que en primera instancia es 0, por lo tanto trae el primero y luego le suma un valor $scope.id++ para que cuando hagas nuevamente click en Siguiente ya busque el segundo elemento. Si el valor de $scope.id es igual a $scope.temas.lenght, desactiva el boton siguiente y activa el anterior. La misma funcionalidad tiene el boton Anterior pero aqui se resta el valor de $scope.id hasta llegar a 0 que es el ultimo item.

Si encuentras algun detalle solo avisa!

2
  • No es lo que buscaba seguro que hay una forma más simple de hacerlo, muchas gracias igualmente.
    – Dalfageme
    el 20 nov. 2016 a las 16:55
  • Cuando la hagas me comentas!
    – sioesi
    el 20 nov. 2016 a las 16:56
0

Usa lo siguiente:

ng-repeat=" x in names | filter: { pregunta: buscar || respuesta : buscar }

Tu Respuesta

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

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