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!