I have the next html code:
<div class="collapse navbar-collapse menu-sidebar">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown" ng-repeat="m in menuSidebar.links">
<a data-toggle="collapse" data-parent="#menu-bar" data-target="#{{'menuSidebar' + $index}}" href="">
{{m.text}}
</a>
<div id="{{'menuSidebar' + $index}}" class="panel-collapse collapse submenu-sidebar">
<ul class="nav nav-stacked">
<li ng-repeat="s in m.sub" ng-class="{active: s.active}">{{s.text}}</li>
</ul>
</div>
</li>
</ul>
</div>
And the next json:
$scope.menuSidebar = {
"links": [
{
"text": "Total",
"sub": [
{
"active": true,
"link": "#",
"text": "General"
},
{
"active": false,
"link": "#",
"text": "Cargos"
},
{
"active": false,
"link": "#",
"text": "Prestadora"
},
{
"active": false,
"link": "#",
"text": "Factura"
}
]
},
{
"text": "Departamento",
"sub": [
{
"active": false,
"link": "#",
"text": "Costos"
},
{
"active": false,
"link": "#",
"text": "Tiempos"
}
]
}
]
};
I would like to define the class of the div in the case that any of the child is active==true.
<div id="{{'menuSidebar' + $index}}" ng-class="active: ..." class="panel-collapse collapse submenu-sidebar">
How to loop through all the children and determine the class? It is possible use ng-class in this case?
Thanks
no need to parse all the children define a "some_active" variable in your controller by doing
<li ng-repeat="s in m.sub" ng-class="{active: s.active}" ng-init="$parent.some_active=$parent.some_active||s.active">{{s.text}}</li>
then you can use
<div id="{{'menuSidebar' + $index}}" ng-class="{active:some_active}" class="panel-collapse collapse submenu-sidebar">
this solution requires that you also modify some_active variable on the on click handlers of your li
other solutions if you don't want to do that would be to have
<div id="{{'menuSidebar' + $index}}" ng-class="{active:someActive()}" class="panel-collapse collapse submenu-sidebar">
where "active:someActive" would be a function defined in your scope that traverses your submenu tree and returns true or false when some options are active.
bottom line it deppends on your layout and whether you prefer notifications or dirty check
I would create a scope function that takes in the link in question:
$scope.hasActiveChildren = function(link) {
for(var i=0; i < link.sub.length; i++) {
if(link.sub[i].active) {
return true;
}
}
return false;
};
And then add it to the markup as you had above:
<div id="{{'menuSidebar' + $index}}" ng-class="{'active': hasActiveChildren(m)}" class="panel-collapse collapse submenu-sidebar">
Here is the JSFiddle
Related
I'm trying to use ng-repeat in a nested json object.
{
"title": "Important message 01",
"img": "any url image here",
"authorPhoto": "http://lorempixel.com/40/40/people/4/",
"author": "John Doe",
"datePosted": "1 day ago",
"thumbsUp": "245",
"thumbsDown": "200",
"commentsNum": "123",
"id": "1",
"comments": [
"comment",
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment",
"dateCommented": "01/08/2016"
}
]
}
I can list the top level json (title, img, etc...), but I do know how to list the comments part
<ion-item ng-repeat="card in cards" href="#/app/playlists/{{card.id}}" class="card-wrapper">
<div class="card" style="background: url({{card.img}}); background-size:100%;">
<div class="inner-wrapper">
<img ng-src="{{card.authorPhoto}}" alt="Author profile photo">
<p class="author">{{card.author}} <br>
{{card.datePosted}}
</p>
<p class="essay">{{card.title}}</p>
<div class="footWrapper">
<div class="thumbsUp"><i class="icon ion-arrow-up-c"></i>{{card.thumbsUp}}</div>
<div class="comments">{{card.commentsNum}}</div>
<div class="thumbsDown"><i class="icon ion-arrow-down-c"></i>{{card.thumbsDown}}</div>
</div>
</div>
</div>
<div class="commentsWrapper">
<div class="head">
<img class="profilePhoto" src="http://tilomitra.com/wp-content/uploads/2014/08/avatar-cartoon.png" alt="avatar photo">
<input type="text" placeholder="Write a comment...">
</div>
<div class="commentsContainer">
<ul>
<li ng-repeat="comment in cards.comments">
{{comment.authorCommentPhoto}} <br>
{{comment.author}} <br>
{{comment.text}} <br>
{{comment.dateCommented}}
</li>
</ul>
</div>
</div>
</ion-item>
How can I solve this ?
The comments array has a string and an object. Remove the string "comments" and just use an array of objects. Then use ng-repeat="comment in card.comments"
{
"comments":[
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment 1",
"dateCommented": "01/08/2016"
},
{
"authorCommentPhoto": "http://lorempixel.com/40/40/people/5/",
"author": "Jimmy doe",
"text": "useless commment 2",
"dateCommented": "01/09/2016"
}
]
}
I am trying to create bootstrap navbar menus dynamically using Angular.
The source data for the menu comes from json which looks like below:
{
"Menu": [
{
"title": "Individual",
"url": "#",
"subMenu": [{
"title": "Individual Address",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
}]
},
{
"title": "Organisation",
"url": "#",
"subMenu": [{
"title": "Organisation Address",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
},{
"title": "Organisation Contact",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
},{
"title": "Organisation Sector",
"url": "http://www.w3schools.com/html/default.asp",
"subMenu": []
}]
},
{
"title": "Return",
"url": "http://www.w3schools.com/js/default.asp",
"subMenu": []
}
]
}
As you can see that there are nested items so we need to have dropdown menus in our navigation bar.
I have created a directive to generate the dynamic menus (I have used the directive found here as a starting point). The modified version of the directive looks like:
app.directive('tree', function ($compile) {
return {
restrict: 'E',
terminal: true,
scope: { val: '=', parentData:'=' },
link: function (scope, element, attrs) {
if (scope.val.subMenu !== undefined && scope.val.subMenu.length > 0) {
template = '<li class="dropdown"> '+
' <a class="dropdown-toggle" data-toggle="dropdown" href="{{val.url}}">{{val.title}} '+
' <span class="caret"></span></a> '+
' <ul class="dropdown-menu"> '+
' <div ng-repeat="item in val.subMenu"> '+
' <tree val="item" parent-data="val.subMenu"></tree> '+
' </div>'
' </ul> '+
'</li> ';
}
else
{
template = '<li>{{val.title}}</i> ';
}
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
}
Below is the html code where I am using this directive
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div ng-repeat="menu in menuFamily.Menu">
<tree val="menu"></tree>
</div>
</ul>
</div>
</nav>
</div>
</div>
The menus are generated but because I am using div tags for ng-repeat, the menus are not rendered properly. However, if I remove the div tags from the generated html everything works fine. So my question how can I achieve what I want without using div tags.
You can also find my sample code at plunker
P.S. I am new to Angular world and I have a very basic knowledge of directives.
If I understand your question correctly, there are two things you need to do:
Correct usage of ng-repeat
ng-repeat can be applied directly to your tree directive. Change
<div ng-repeat="...">
<tree ...>
</div>
To
<tree ng-repeat="..." />
Both in your html file and in your directive's template property.
This will apply the proper styles to your menu.
Import Bootstrap js and initialize dropdowns
Because Angular will modify the DOM to add your dropdown's HTML, you need to manually initialize the dropdowns once they have been added.
Call $('.dropdown-toggle').dropdown() once your elements have been added.
Nevermind, just add the Bootstrap JS in your page, seems it properly initializes by itself.
<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery#*"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Editied plunkr is here.
I have this json set that needs to be displayed (in columns):
{
"2": [
{
"$id": "1",
"serverId": 1622,
"innCode": "PLOIKJ7",
"propertyName": "Property 1",
},
{
"$id": "2",
"serverId": 1622,
"innCode": "BHGTRWA",
"propertyName": "Property 2",
}
],
"3": [
{
"$id": "3",
"serverId": 1623,
"innCode": "TGHRE#W",
"propertyName": "Property 3",
}
]
}
I can't think of a way to "loop" through it using ng-repeat. I have the following template defined as a starter:
<div ng-repeat="s in sets">
<div class="panel panel-info">
<div class="panel-heading"><span><bold>Server: {{s.serverNum}}</bold></span></div>
<div class="panel-body">
<div>
<input type="checkbox" value="all#" ng-click="doNothing($event)"/>Select All
</div>
<div class="divider"> </div>
<div ng-repeat="p in s.properties">
<label class="margin-right12">
<input type="checkbox" name="property_{{p.innCode}}"
value="{{p.innCode}}" ng-click="doNothing($event)"/> <small>{{innCode}} - {{p.propertyName}}</small>
</label>
</div>
</div>
</div>
</div>
Thanks!
You can do like this
Inside the controller
$scope.data = {
"2": [
{
"$id": "1",
"serverId": 1622,
"innCode": "PLOIKJ7",
"propertyName": "Property 1",
},
{
"$id": "2",
"serverId": 1622,
"innCode": "BHGTRWA",
"propertyName": "Property 2",
}
],
"3": [
{
"$id": "3",
"serverId": 1623,
"innCode": "TGHRE#W",
"propertyName": "Property 3",
}
]
};
Inside the template
<div ng-controller="yourCntroName">
<div ng-repeat="(key, val) in data">// By this line you will get all keys of your set. '2' and '3' in your case
<div ng-repeat="obj in val"> // val will give you value of key(first time '2' and second time '3' in your case) that is an array so again use repeat.
{{'$id = '+obj.$id+' ,'}}{{'serverId = '+obj.serverId}}
</div>
</div>
</div>
The documentation for the built-in ng-repeat directive is available here.
Based on that documentation, the applicable expression for your use case should be ng-repeat="(key, value) in expression". expression should be substituted with set in your code.
Eventually you should arrive at something like this:
<div ng-repeat="(count, servers) in sets">
<div class="panel panel-info">
<div class="panel-heading">
<span><bold>Server: {{count}}</bold></span>
</div>
<div class="panel-body">
<div>
<input type="checkbox" value="all#" ng-click="doNothing($event)" />Select All
</div>
<div class="divider"> </div>
<div ng-repeat="server in servers">
<label class="margin-right12">
<input type="checkbox" name="property_{{server.innCode}}" value="{{server.innCode}}" ng-click="doNothing($event)" /> <small>{{server.innCode}} - {{server.propertyName}}</small>
</label>
</div>
</div>
</div>
</div>
Your markup could use a lot of improvement, but one thing at a time - I suggest you read the doc.
This is my code for showing simple drop down list
var products = [
{
"id": 1,
"name": "Product 1",
"price": 2200,
"category": "c1"
},
{
"id": 1,
"name": "Product 2",
"price": 2200,
"category": "c2"
},
{
"id": 1,
"name": "Product 3",
"price": 2200,
"category": "c1"
},
{
"id": 1,
"name": "Product 4",
"price": 2200,
"category": "c3"
},
{
"id": 1,
"name": "Product 5",
"price": 2200,
"category": "c3"
}
];
<div ng-repeat="product in products" class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="product in products">{{product.name}}</li>
</ul>
</div>
I want to show drop down list based on category, if there are 3 categories in object I want 3 drop down list with their products showing inside their drop down list if 2 category then 2 drop down lists and so on.
Can anyone help me how to achieve this? I am new to Angular.
Thank you
The tip in the comments to the other SO question is really helpful.
You could do it with the mentioned library with $scope.categories = $filter('groupBy')($scope.products, 'category') in your controller or with ng-repeat="(group, cat) in ( products | groupBy : 'category')" in your markup.
Please have a look at the demo below or in this fiddle.
angular.module('demoApp', ['ui.bootstrap', 'angular.filter'])
.controller('mainController', function ($scope, $filter) {
$scope.products = [{
"id": 1,
"name": "Product 1",
"price": 2200,
"category": "c1"
}, {
"id": 2,
"name": "Product 2",
"price": 2200,
"category": "c2"
}, {
"id": 3,
"name": "Product 3",
"price": 2200,
"category": "c1"
}, {
"id": 4,
"name": "Product 4",
"price": 2200,
"category": "c3"
}, {
"id": 5,
"name": "Product 5",
"price": 2200,
"category": "c3"
}];
$scope.categories = $filter('groupBy')($scope.products, 'category');
console.log($scope.categories);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<script src="https://cdn.rawgit.com/a8m/angular-filter/master/dist/angular-filter.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<div class="dropdown" dropdown>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select products<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="product in products">{{product.name}}</li>
</ul>
</div>
<div dropdown>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select category<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="(group, cat) in categories">
<!--{{group}}
{{cat}}-->
<strong>category: {{group}}</strong>
{{item.name}}
</li>
</ul>
</div>
</div>
Background:
I have created an AngularJS test app which, obtains data from a JSON file, which is separated into categories and within each category is an employee card which is displayed through ng-repeat. These categories can then be viewed utilising a slider (using bxSlider).
Aim:
With bxSlider you can use custom Next/Previous buttons, what I wanted to achieve was to dynamically display the relevant category names in the Next/Previous buttons (please see annotation link below - my level does not allow me to post images).
Website Category Slider Wireframe
For example: the current category on view is the 'Technology' department, the previous button may then show 'Motors' department and the next button may show 'Law' department.
I understand that the code below would allow me to access the Category name 'Technology'. However this needs to be done in a dynamic nature.
{{employees[0].category}}
Below this I will include all what I believe to be relevant code.
JSON file:
[
{
"category": "Technology",
"shortname": "tech",
"icon": "fa-desktop",
"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"
},
{
"id": "card-3",
"name": "Mark Zuckerberg",
"shortname": "M_Zuck",
"age": "30",
"company": "Facebook",
"role": "CEO"
},
{
"id": "card-4",
"name": "Tim Cook",
"shortname": "T_Cook",
"age": "54",
"company": "Apple Inc.",
"role": "CEO"
},
{
"id": "card-5",
"name": "Jony Ive",
"shortname": "J_Ive",
"age": "48",
"company": "Apple Inc.",
"role": "Senior Vice President of Design"
},
{
"id": "card-6",
"name": "Marissa Mayer",
"shortname": "M_May",
"age": "39",
"company": "Yahoo!",
"role": "CEO"
},
{
"id": "card-7",
"name": "Yves Behar",
"shortname": "Y_Beh",
"age": "47",
"company": "Fuseproject",
"role": "Founder"
}
]
},
{
"category": "Motors",
"shortname": "mot",
"icon": "fa-car",
"cards": [
{
"name": "Elon Musk",
"shortname": "E_Musk",
"age": "43",
"company": "Tesla Motors",
"role": "CEO"
}
]
},
{
"category": "Football",
"shortname": "foot",
"icon": "fa-futbol-o",
"cards": [
{
"id": "card-1",
"name": "Sir Alex Ferguson",
"shortname": "A_Fer",
"age": "73",
"company": "N/A",
"role": "Retired"
}
]
},
{
"category": "Law",
"shortname": "law",
"icon": "fa-gavel",
"cards": [
{
"id": "card-1",
"name": "Harvey Specter",
"shortname": "H_Spec",
"age": "43",
"company": "Pearson Specter Litt",
"role": "Name Partner"
}
]
}
]
HTML Code:
<!-- Slider Container -->
<div class="slider-container">
<!-- Search Content -->
<!-- controls: true -->
<div class="content-results bxslider"
bx-slider="mode: 'horizontal', pager: true, nextSelector: '#next', prevSelector: '#prev', nextText: '<i class=\'fa fa-chevron-right\'></i>', prevText: '<i class=\'fa fa-chevron-left\'></i>', minSlides: 1, maxSlides:1, infiniteLoop: true, adaptiveHeight: true, hideControlOnEnd: false">
<!-- Employee -->
<div class="cards-container"
ng-repeat="item in filtered = ( employees | filter: query | orderBy:empOrder:direction )"
notify-repeat-finished>
<div class="category" ng-animate="'animate'" >
<div class="category-title">
<h1 class="title-cat"><i class="fa {{item.icon}}"></i> {{ item.category }}</h1>
</div>
<div class="category-cards-container">
<div class="employee-card card" ng-repeat="employee in filtered = (item.cards | filter: query | orderBy:empOrder:direction )" dom-manipulation>
<!-- Front Card -->
<div class="front">
<div class="pic-container">
<img ng-src="../static/images/placeholders/{{ employee.shortname }}.jpg" class="emp-pic" alt="Photo of {{ employee.name }}">
<h3 class="emp-name">{{ employee.name }}</h3>
<div class="darken"></div>
</div>
<ul class="emp-details">
<li class="detail emp-age">
<h5>Age: <small>{{ employee.age }}</small></h5>
</li>
<li class="detail emp-role">
<h5>Role: <br><small>{{ employee.role }}</small></h5>
</li>
<li class="detail emp-company">
<h5>Company: <br><small>{{ employee.company }}</small></h5>
</li>
</ul>
</div>
<!-- END Front Card -->
<!-- Back Card -->
<div class="back">
<div id="map-load">
<i class="fa fa-map-marker"></i>
</div>
<div id="maps-container">
<div id="googleMap"></div>
</div>
<i class="fa fa-times"></i>
</div>
<!-- END Back Card -->
</div>
</div>
</div>
<!-- No Matches -->
<div class="no-match" ng-show="filtered.length == 0">
<h3 class="no-matchText">Your search provides no matches!</h3>
</div>
<!-- END No Matches -->
</div>
<!-- END Employee -->
</div>
<!-- END Search Content -->
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next">
</a>
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev">
</a>
</div>
</div>
<!-- END Next & Previous Buttons -->
</div>
<!-- END Slider Container -->
AngularJS:
Controller
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.empOrder = 'name';
}).
error(function(){
console.log("JSON file NOT loaded");
});
}]);
EDIT
Updated Controller
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.empOrder = 'name';
//Next & Previous Button Category Label
$scope.getNextCategoryIndex = function(currentIndex){
var nextIndex = currentIndex+1;
if( nextIndex >= $scope.employees.length ){
//move to start if at list end
nextIndex = 0;
}
return nextIndex;
}
$scope.getPrevCategoryIndex = function(currentIndex){
var prevIndex = currentIndex+1;
if( prevIndex < 0 ){
//move to the last index, if already at the start
prevIndex = $scope.employees.length - 1;
}
return prevIndex;
}
}).
error(function(){
console.log("JSON file NOT loaded");
});
}]);
Updated Next/Previous Buttons
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next">
{{ employees[getNextCategoryIndex($index)].category }}
</a>
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev">
{{ employees[getPrevCategoryIndex($index)].category }}
</a>
</div>
</div>
<!-- END Next & Previous Buttons -->
I would probably do something like this: create functions to your controller to get the previous and next indexes (to handle the index overflows):
$scope.getNextCategoryIndex = function(currentIndex) {
var nextIndex = currentIndex+1;
if (nextIndex >= $scope.employees.length) {
// move over to start if we already were at the end of the list
nextIndex = 0;
}
return nextIndex;
}
$scope.getPrevCategoryIndex = function(currentIndex) {
var prevIndex = currentIndex+1;
if (prevIndex < 0) {
// move over to the last index, if we already are at the start
prevIndex = $scope.employees.length - 1;
}
return prevIndex;
}
And then in the HTML call those functions using $index (the current index of ng-repeat, see AngularJS documentation for ngRepeat for more details) as parameter:
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next">
{{employees[getNextCategoryIndex($index)].category}}
</a>
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev">
{{employees[getPrevCategoryIndex($index)].category}}
</a>
</div>
</div>
<!-- END Next & Previous Buttons -->
The code you need should be:
{{employees[$index - 1].category}} //For the prev
{{employees[$index + 1].category}} //For the next
Recent Update (09-Apr-2015):
I have now been able to achieve what I wanted, on click of the button the relevant function runs and loops through the category names. One more thing to add now is that the buttons run in sync.
Controller
//Next & Previous Button Category Label
$scope.i = 0;
$scope.j = $scope.employees.length;
$scope.nextCat = $scope.i + 1;
$scope.prevCat = $scope.j - 1;
$scope.getNext = function(){
//console.log($scope.nextCat);
$scope.nextCat++;
if( $scope.nextCat >= $scope.employees.length ){
$scope.nextCat = 0;
}
$scope.prevCat++;
if( $scope.prevCat >= $scope.employees.length ){
$scope.prevCat = 0;
}
};
$scope.getPrev = function(){
//console.log($scope.nextCat);
$scope.prevCat--;
if( $scope.prevCat < 0 ){
$scope.prevCat = $scope.employees.length - 1;
}
$scope.nextCat--;
if( $scope.nextCat < 0 ){
$scope.nextCat = $scope.employees.length - 1;
}
};
HTML
<!-- Next & Previous Buttons -->
<div class="btn-nextprev">
<div class="next-container">
<a href="" class="btn btn-next" id="next"
ng-click="getNext()">
</a>
{{ employees[nextCat].category }}
</div>
<div class="prev-container">
<a href="" class="btn btn-prev" id="prev"
ng-click="getPrev()">
</a>
{{ employees[prevCat].category }}
<!-- {{ employees[prevCat].category }} -->
</div>
</div>
<!-- END Next & Previous Buttons -->
Update:
This is still not going to be a viable solution. I am technically able to achieve what is required however I am still required to use position: fixed. This means that the Category label then disappears.
I am now going to try and achieve this without it being within the ng-repeat and using ng-click it will iterate to the next Category name. Hopefully this will be the solution, and I will update upon any success/failure.
Update:
I am yet to find my optimal solution however, my current workaround for this utilises #jmustonen's solution.
Outside of the bxSlider I have the custom arrow's (if I placed these inside there were issues with the arrows not duplicating across pages - I believe there's an issue with it when it has position:fixed).
Then within my ng-repeat I include...
{{ employees[getNextCategoryIndex($index)].category }}
I will then be required to do some CSS in order for this to appear as if it is displayed as part of the Next/Previous buttons. Again these become invisible if position: fixed is used.