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">
Related
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(...)".
<ul class="data-ctrl mCustomScrollbar" id="scrollbar" data-mcs-theme="minimal-dark dark123" data-ng-init="initScrollBar()">
<li data-ng-repeat="i in items | searchFor:searchString | limitTo:limit" >
<p><a data-ng-href="{{i.link}}" class="search-link">{{i.title}}</a></p>
<p>{{i.description}}</p>
<p><a class="small" data-ng-href="{{i.link}}">{{i.link}}</a></p>
<li data-ng-repeat-empty >No Records Found</li>
</li>
</ul>
I am providing search option to the user using above code.when i am trying to show message like no record found when search string is empty from my json db file using data-ng-repeat-empty, but problem is 'No Records Found' showing for both cases like Record found and record not found.
Store the filter data in variable and then check the length of variable it will work.
<ul>
<li data-ng-repeat="i in filterItem = (items | searchFor:searchString | limitTo:limit)" >
<p><a data-ng-href="{{i.link}}" class="search-link">{{i.title}}</a></p>
<p>{{i.description}}</p>
<p><a class="small" data-ng-href="{{i.link}}">{{i.link}}</a></p>
</li>
<li ng-if="!filterItem.length">No Records Found</li>
</ul>
You can check items.length with ng-if or ng-show
And put your message out side the ng-repeat
<ul>
<li data-ng-repeat="i in items | searchFor:searchString | limitTo:limit" >
<p><a data-ng-href="{{i.link}}" class="search-link">{{i.title}}</a></p>
<p>{{i.description}}</p>
<p><a class="small" data-ng-href="{{i.link}}">{{i.link}}</a></p>
</li>
<li ng-if="!items.length">No Records Found</li>
</ul>
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.
I want to display a list of shops in an unordered list. I want to exclude "currentShop" from all shops. I wrote something like:
<ul class="dropdown-menu dropdown-menu-default">
<li ng-repeat="shop in user.account.shops | filter:!currentShop}">
<a href="#/profile">
<i class="icon-user"></i> {{shop.name}} </a>
</li>
</ul>
Where am I wrong?
Here you have a working example. You can filter by a scope expression
ng-repeat="item in list | filter: myExpression"
Define your filter function;
$scope.myExpression= function(shop) {
return shop.id !== $scope.current.id;
};
I have a situation where i am sorting data on the basis of expression:
html :
<ul>
<li ng-click="expression = 'created_at'" ng-class="latest_icon: 'selected'" >latest post</li>
<li ng-click="expression = 'popularity'" ng-class="popular_post: 'selected'" >popular post</li>
</ul>
<div ng-repeat = "data in posts | orderBy::expression:true">
//showing data
</div>
So whenever user click on one of the list wheather it is popular or latest ,selected class will be activated. How could i give expression to ng-class so that selected class on list get activated. this is without ng-repeat where i can use $index and onselect we can active class. how can i do this here?
I am not sure which class you want to apply but you can do something like
<ul>
<li ng-click="expression = 'created_at';selectedOption='latest'" ng-class="{latest_icon:true, 'selected':selectedOption=='latest'}" >latest post</li>
<li ng-click="expression = 'popularity';selectedOption='popular'" ng-class="{popular_post:true, 'selected':selectedOption=='popular'}" >popular post</li>
</ul>
Here we create a variable selectedOption on the scope, set it's value on ng-click and check it in ng-class expression.
Here is an example of a conditional ng-class attribute from my code.
div(ng-class="{'fixed':isFixed}")
So from this I reckon your code should look something like this:
<ul>
<li ng-click="expression = 'created_at'" class="created_at" ng-class="'selected' : expression=='created_at'" >latest post</li>
<li ng-click="expression = 'popularity'" class="popular_post" ng-class="'selected' : expression=='popularity'" >popular post</li>
</ul>
I was doing some syntax error. We can simply resolve this
<ul>
<li ng-click="expression= 'created_at'" ng-class= "latest_icon : expression == 'created_at'">Latest </li>
<li ng-click="expression= 'popularity'" ng-class= "popular_icon : expression == 'popularity'">Latest </li>
</ul>
Here latest_icon and popular_icon are classes name which activate according to selected list.