I want to change the button texts from Pager UI-Bootstrap in Angular.
I've this array:
categories = ["Standard", "Premium"];
But this code show the variable's name and with moustache doesn't work.
<uib-pager total-items="categories.length" items-per-page=1 ng-model="page" previous-text=categories[page-2] next-text=categories[page] ></uib-pager>
This works but I would prefer use uib-pager:
<ul class="pager">
<li class="previous" ng-class="{'disabled':!categories[pag-2]}" ng-click="pag=pag-1">{{categories[pag-2]}}</li>
<li class="next" ng-class="{'disabled':!categories[pag]}" ng-click="pag=pag+1">{{categories[pag]}}</li>
</ul>
Related
In an ng-repeat I want to add a hide-xs attribute on an element based on the current scope.
How can I do that?
I basically want to do something like (this obviously don't work):
<li ng-repeat="item in items" hide-xs="{{ item.showAlways ? 'false' : 'true' }}">
{{item.title}}
</li>
Edit
I ended up doing this (as suggested by DieuNQ) but if anybody know how to do it using directive and not class I would take it
<li ng-repeat="item in items" ng-class="{'hide-xs': !item.showAlways }}">
{{item.title}}
</li>
hide-xs not works like that (it does not depend on true or false). It just add class to your tag. Try this:
In your html:
<li ng-repeat="item in items" ng-model="item.showAlways" ng-class="someClass">
...
</li>
In your controller:
$scope.item.showAlways ? $scope.someClass == '' : $scope.someClass == 'hide-xs';
I have an html template that filters a list by the column property of the objects of that list like so:
<ul>
<li card-view
card-id="state.card"
ng-repeat="state in ctrl.game.states | filter:{column:'backlog'} "
ng-include="cardview.html">
</li>
</ul>
If I modify the column property in one of the elements of that list, the display does not update.
How can I make that happen?
Here's one option that uses an imaginary placeholder tag and avoids the |filter replacing it with an ng-if, but I hope someone has a better answer than this one.
<ul>
<xx ng-repeat="state in ctrl.game.states">
<li card-view
card-id="state.card"
ng-if="state.column == 'backlog'"
ng-include="cardview.html">
</li>
</xx>
</ul>
Doing the ng-if and ng-repeat on the same element didn't work.
We have this nested list:
<ul id="AllTopics" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search topic...">
<li>Polite Phrases<span class="ui-li-count">101</span>
<ul data-role="listview" data-inset="true" >
<li >Polite Phrases<span class="ui-li-count">101</span></li>
<li >At The End Of A Letter/Email<span class="ui-li-count">101</span></li>
</ul>
</li>
</ul>
The first <ul> with the id="AllTopics" is in the html documnet itself,
The inner <li><ul><li>... are loaded from Ajax call like:
on('pageinit'... event
... $("ul").append(...
I can get the event from the first new born <li> , like:
$('#AllTopics').on('click','li',function (event){...
But the inner <li> or <a> do not seem to fire events :-(
Ani ideas ?
Thank's in advance
The problem would be that the new content is loaded using an Ajax call, and you just setup the events before, so the new elements won't have them.
Try using delegate JQuery function:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on my links?!');
});
EDIT
Other solution is to assign the events once elements are added via Ajax call.
// This is an example, retrieve the data on your own form
$.get('mypage.php',function(data){
// Add content to your DOM elements
$('#AllTopics').append(data);
// Assign events
$('#AllTopics').on('click','li',function (event){
alert('Holy moly, you keep clicking on my links!');
});
});
Note: I just realized that your HTML elements have this composition:
<ul>
<li>
<a/>
</li>
<span/>
<ul>
<li>
</a>
</li>
</ul>
</ul>
So, OF COURSE that is only affecting the first one because there are two levels of li - a (you have an ul element inside another one). You can define an ID for your second group of li - a elements to trigger events successfully or keep doing it in this way:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on the first link?!');
});
$('#AllTopics').delegate('ul li a','click',function(){
alert('Stop clicking my children links!');
});
I am trying to simplify a navigation tree with a jquery accordion style menu. With some help from other posts i feel like im missing something simple. What is getting me is that one category has a second sub list. I cant get it to to open.close correctly. the sample code I have here just does not expand "T1 sub b" item. What am I missing?
http://jsfiddle.net/9uvgs/203/
html:
<ul class='menu'>
<li>Tier1</li>
<ul>
<li>T1 sub a</li>
<li>T1 sub b</li>
<ul>
<li>T1 sub i</li>
</ul>
</ul>
<li>Tier 2</li>
<ul>
<li>T2 sub a</li>
<li>T2 sub a</li>
<li>T2 sub a</li>
</ul>
</ul>
Jquery
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu>li').click(function(){
$(this).next('ul').slideToggle();
});
});
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu li').click(function(){
$(this).next('ul').slideToggle();
});
});
I've done this and it looks like working just fine.
You are only applying the click event to the direct children of ul.menu a simple solution would be to change you selector to ul.menu li instead of ul.menu>li
$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu li').click(function(){
$(this).next('ul').slideToggle();
});
});
I'm having a hard time getting the "active" class to stay across different pages. I have the navbar loading on each page via a layout, could this be the issue?
I just have this inside my layout gsp for creating the navbar, and it works perfectly. I only have items in the navbar at the level of the controller, not for individual actions.
<li ${controllerName.equals('schedule') ? 'class="active"' : ''}>Schedule</li>
For the default controller generated by Grails, you can use
<li ${controllerName == null ? 'class="active"' : ''}>Home</li>
Yes, that is the issue.
Whenever you reload the page, whatever <li> element has class=active will be set to active again.
If you have /grails-app/views/layouts/main.gsp with the following:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Fred</li>
<li>Barney</li>
</ul>
</div>
</div>
And your GSPs for Fred and Barney use the main.gsp layout, when you click on them, you will load the code above and the link for "Home" will still be active.
Solutions are to write a Taglib for the Navbar control, or create separate layout pages.