Objective: When the next/previous button is clicked, the label on the current slide should change to display the next/previous category. View the Category Slider Wireframe for reference.
Context: I previously tried a solution called 'Obtain Next/Previous Value from Object' which required using ng-repeat. However, despite generating the desired data, it did not work properly with the bxSlider plugin as expected. This led me to explore alternative solutions where I can keep the arrows and labels outside of ng-repeat.
Proposed Solution: I realized that keeping this functionality outside of ng-repeat might be the best approach. To achieve this, I believe I need to create a variable attached to the scope that will increment/decrement accordingly. This way, the appropriate Next/Previous buttons can be displayed correctly.
I initially attempted using
, but this only ended up adding numbers at the end of the category instead of functioning as intended.
Any assistance on this matter would be highly appreciated :)ng-click="activeCat = activeCat + 1"
HTML Code snippet
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next" ng-click="nextCat = nextCat + 1">
{{ employees[getNextCategoryIndex($index)].category }} {{nextCat}}
</a>
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev">
{{ employees[getPrevCategoryIndex($index)].category }} {{prevCat}}
</a>
</div>
</div>
<!-- END Next & Previous Buttons -->
Controller Logic:
var personControllers = angular.module('personControllers', ['ngAnimate']);
//PersonSearch Controller
personControllers.controller('PersonList', ['$scope', '$http',
function($scope, $http) {
$http.get('../static/scripts/data2.json').
success(function(data) {
console.log("JSON file loaded");
console.log(data);
$scope.employees = data;
$scope.activeCat = data[0].category;
$scope.nextCat = data[0 + 1].category;
//$scope.prevCat = data[0 - 1].category;
}).
error(function(){
console.log("JSON file NOT loaded");
});
}]);
JSON Data Structure:
[
{
"category": "Technology",
"shortname": "tech",
"icon": "fa-desktop",
"cat_id": 0,
"cards": [
{
"id": "card-1",
"name": "George Sofroniou",
"shortname": "G_Sof",
"age": "23",
"company": "Pirean Ltd.",
"role": "Graduate UI Developer"
},
{
"id": "card-2",
"name": "Steve Jobs",
"shortname": "S_Jobs",
"age": "56 (Died)",
"company": "Apple Inc.",
"role": "Former CEO"
}
]
},
{
"category": "Motors",
"shortname": "mot",
"icon": "fa-car",
"cat_id": 1,
"cards": [
{
"id": "card-1",
"name": "Elon Musk",
"shortname": "E_Musk",
"age": "43",
"company": "Tesla Motors",
"role": "CEO"
},
{
"id": "card-2",
"name": "Henry Ford",
"shortname": "H_Ford",
"age": "83 (Died)",
"company": "Ford Motor Company",
"role": "Founder"
}
]
},
{
"category": "Football",
"shortname": "foot",
"icon": "fa-futbol-o",
"cat_id": 2,
"cards": [
{
"id": "card-1",
"name": "Sir Alex Ferguson",
"shortname": "A_Fer",
"age": "73",
"company": "N/A",
"role": "Retired"
},
{
"id": "card-2",
"name": "Bobby Moore",
"shortname": "B_Moor",
"age": "51 (Died)",
"company": "N/A",
"role": "Footballer"
}
]
},
{
"category": "Law",
"shortname": "law",
"icon": "fa-gavel",
"cat_id": 3,
"cards": [
{
"id": "card-1",
"name": "Harvey Specter",
"shortname": "H_Spec",
"age": "43",
"company": "Pearson Specter Litt",
"role": "Name Partner"
},
{
"id": "card-2",
"name": "Saul Goodman (James Morgan McGill)",
"shortname": "S_Good",
"age": "48",
"company": "Better Call Saul",
"role": "Criminal Defence Attorney"
}
]
}
]