pagination-control not showing direction arrows when items Per Page is expression, I have install angular-utils-pagination using bower add dependencies in controller. please tell me what to do..
You have to make sure the controls are added on the dirPagination.tpl.html as following:
<ul class="pagination" ng-if="1 < pages.length || !autoHide">
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
«
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
‹
</li>
.... repeat items here ....
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
›
</li>
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }">
»
</li>
</ul>
Also make sure the direction-links are set to true(default) on the dir-pagination-controls directive.
direction-links (optional, default = true) Specify whether to display
the "forwards" & "backwards" arrows in the pagination.
If the problem still remains, please share some more code trough a Punkr/Fiddle/... Se we can have a better insight.
Related
I need to disable element list inside a nav when certain parameter is equal to 'N', and enable it when it is equal to 'S'. This is my code
<div class="slidebar-nav">
<nav class="navbar navbar-default" role="navigation">
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li ng-disabled="trxAbil.I9WSFONI == 'N'"
ng-class="{'current' : itemSelected === 'Gestione fondi'}"
ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})"
ng-click="onMenuSelection('Gestione fondi')">
<a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a>
</li>
<li class="active"
ng-class="{'current' : itemSelected === 'Invio fondi'}"
ui-sref="home.pag2" ng-click="onMenuSelection('Invio fondi')">
<a><span class="glyphicon glyphicon-send"></span> Invio fondi</a>
</li>
<li class="active"
ng-class="{'current' : itemSelected === 'Sintesi fondi'}"
ui-sref="home.pag3" ng-click="onMenuSelection('Sintesi fondi')">
<a><span class="glyphicon glyphicon-send"></span> Sintesi fondi</a>
</li>
</ul>
</div>
</nav>
</div>
I try with ng-disabled="trxAbil.I9WSFONI == 'N'" but it doesn't work.
Any ideas? Thank you in advance
I assume that you're using Bootstrap in your UI (by watching navbar navbar-default classes).
You simply need to assign disabled class based on your conditions to disable an item in the menu. It will automatically prevent the click on that item.
<li ng-class="{'current' : itemSelected === 'Gestione fondi', 'disabled': trxAbil.I9WSFONI == 'N'}" ... > ... </li>
No need to assign ng-disabled to the li element.
If you want to show the item but make it not clickable and look disabled using CSS or your are using bootstrap then add 'disabled' : trxAbil.I9WSFONI == 'N' condition ng-class attribute in <li> tag:
CSS:
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}
HTML:
<li ng-class="{'disabled' : trxAbil.I9WSFONI == 'N', 'current' : itemSelected === 'Gestione fondi'}" ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})" ng-click="onMenuSelection('Gestione fondi')"><a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a></li>
I want to create a set of pills with all the states with their number of electors and I want the pill that is clicked becomes active. So, my unsuccesful attempt for this matter is as follows:
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
And, inside my controller I have this piece of code for that matter:
$scope.tab = "Alabama";
$scope.isSet = function(checkTab) {
return $scope.tab === checkTab;
};
$scope.setTab = function(activeTab) {
$scope.tab = activeTab;
};
By the way, at first I tried to make the pills active by comparing their indices but that didn't help. It would be even better if you can help me with a way to do this using the indices. I apologize if there is already a posted solution to this but I couldn't find it.
Thanks in advance!
<ul class="nav nav-pills">
<li ng-class="{ 'active':tab.isSet(x.name) }" ng-repeat="x in states">
<a href ng-click="tab.setTab(x.name)">{{x.name}} <span class="badge">{{x.elector}}</span></a>
</li>
</ul>
Note the quotes around active
I found it, I should've deleted the "tab"s in "tab.isset(...)".
hello i am working on a navigation direction.
if there are any child entries i have to add a attribute "uib-dropdown"
<li ng-attr-uib-dropdown="{{!!tree[$index].children ? '' : undefined }}" ng-repeat="nav in tree" ng-class="{ 'active' : isActive(nav.path) }">
the variable "!!tree[$index].children" would return true or false.
i am behind google now since 2hours but i cannot see how to use this expression with ng-attr the right way.
because now its adding the uib-dropdown to every li. doesn´t matter if it is true or false.
i hope someone can help me.
thanks
Because our answer for tree[$index].children can be truthy, if tree[$index].children has an answer, it will be true, if it's empty or undefined, then it will be false/falsey. There is no need for the !! or the ternary operator.
<li ng-attr-uib-dropdown="{{tree[$index].children}}">
You could also use the || (or operator) to better illustrate "falsey" of undefined.
<li ng-attr-uib-dropdown="{{tree[$index].children || undefined}}">
Created a plunkit. Here I used ng-if where if the array "food" exist, then allow the dropdown. If you remove the "food" array, the link is replaced without the dropdown.
<a href ng-if="!food">
Click me, no dropdown, yo!
</a>
<!-- Simple dropdown -->
<span ng-if="food" uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
i am trying to active category name which user selects but its not getting highlighted.Where i am going wrong please help.
Index.jsp
<ul class="nav" ng-controller="CategoriesCtrl">
<li ng-class="{ selCategory == ''}"><i class="icon bb-bars"></i>All Category</li>
<li data-ng-class="{'active' : selCategory == '/{{category.name}}'}" ng-repeat="category in categories | limitTo:10:10">
<i class="{{iconsList[$index].name}}"></i>{{ category.name }}
</li>
<li>
</ul>
in index page i was displaying all categories name.once user selects it has to be highlighted .data-ng-class='active' not working
I solved this with help of this link . .http://www.angulartutorial.net/2014/04/angular-js-add-class-to-active-element.html
You should write it as
<li data-ng-class="{'active' : (selCategory == category.name)}" ng-repeat="category in categories | limitTo:10:10">
In my ng-repeat, i require the DOM to be switched, according to the active status.
i tried like this, but not working for me:
<ul>
<li ng-click="activate(item)" ng-repeat="item in items" ng-class="{active : active == item}">
<span ng-if="item==active">
<span>{{item}}</span><!-- when active nested under span -->
</span>
<!-- else without nesting the span -->
<span ng-if="item== !active">{{item}}</span> //this is not working
</li>
</ul>
Live Demo
Replace your last ng-if statement to this (you've just made syntax error):
<span ng-if="item !== active">{{item}}</span>
Your active variable isn't boolean, so you can't toggle it in your statement.