I'm using ng-show option in AngularJS.
<button ng-click="removeFilter();">
<span ng-repeat="cat in ctrl.getCategories()" ng-show="ctrl.filter[cat]" class="fa fa-close"></span></button>
This works very good but if I click second item, this div add another one but one button is enough for me.
How can I do that? Thanks.
Just place it outside
<button ng-click="removeFilter();"> </button>
<span ng-repeat="cat in ctrl.getCategories()" ng-show="ctrl.filter[cat]" class="fa fa-close"></span>
Related
tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?
It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog
i'm using templates for a netbanking app (project at university) and try to implement a delete button for the templates.
Each list element is a button itself and changes the view on clicking one list element. Inside i repeatedly constructed a delete button.
The problem is, that each time i click the delete button, the view changes as well - is there any simple ng-click for instance, that deactivates the ui-sref when the delete button is clicked?
<div ng-model="chosentemplate">
<a class="item item-thumbnail-left" ng-repeat="template in Templatelist" ng-model="choosetemplate" ui-sref="tab.transactions({params:template.iban})">
<img ng-src="img/{{template.image}}">
<h2><b>{{template.name}}</b></h2>
<p ><b>IBAN</b> {{template.iban}}</p>
<button ng-if="deletePress" ng-click="deleteTemplates($index)" ng-model="deletethistemplate" class="button button-small button-assertive">
Löschen
</button>
</a>
</div>
Thanks a lot!!
I have a couple of drop downs using bootstrap and I want to code in a simple function to change the class of my span element inside the link that is clicked.
To clarify... Here's an example of the HTML I have:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
onclick="toggleIcon()">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
I am looking for a function (using JS or JQuery) which can toggle the second span class to change between glyphicon glyphicon-triangle-bottom and glyphicon glyphicon-triangle-top.
Bear in mind, this function has to work for multiple drop-downs. Any help would be much appreciated.
$('a[data-toggle="collapse"]').click(function() {
$(this)
.find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
.toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});
Also remove onclick="toggleIcon()"
This should work for all anchor tags that have data-toggle="collapse" attribute.
Fairly straightforward - better to use a $.click() function and get your classes right:
<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
What I did up here was add the class of toggle-icon to the top link, and the class of icon-toggle to the span of the glyphicon...the JS is as follows:
// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})
Annotations added so you can read the code better. Hope this helps!
https://jsfiddle.net/khxehd05/
$(function(){
$('#checkcls').click(function(){
if($('#tglcls').hasClass('glyphicon-triangle-bottom')){
$('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
else{
$('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top');
//to check class
alert($("#tglcls").attr('class'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'>
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
Hope it helps you.
So far answers here I would consider just mildly-ok (in my humble opinion). Take a moment and read:
Decoupling Your HTML, CSS, and JavaScript
I would change a few things to make it look really readable and maintainable:
Html:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
<span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
css:
[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
display: none;
}
[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
display: none;
}
Working JsFiddle Example
I highly recommend you avoid at all costs using inline functions. (onclick="toggleIcon()")
Take advantage of CSS and what Bootstrap already does by simply writing html and css only!
Completely reusable, doesn't care what glyphs you use, doesn't require javascript, nothing is hard-coded in terms of events nor classes.
I have the following code:
<div ng-repeat="item in selectedCategory">
<div class="repertoire-composer">
<div data-toggle="collapse" data-target="#compositions{{$index}}"
class="repertoire-composer-title">
<span class="fa fa-chevron-right"></span>
{{item.composer}}
<span class="fa fa-plus"></span>
</div>
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
<div class="repertoire-composition">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>
</div>
</div>
So what I basically want is to have a tree of multiple .repertoire-composer divs, each of which with one or many child .repertoire-composition inside its .repertoire-compositions div. So in the second repeat, angular should create one or more .repertoire-composition divs. However, what it seems to do is create more divs of the one the directive is on. Hope I've been explicit enough, here's the unwanted result:
So basically, why is my .repertoire-compositions div getting duplicated?
EDIT:
I was misunderstanding ng-repeat. This is the intended behaviour of it: to repeat the element the directive is on. Thanks for the clarification.
.repertoire-compositions is not being duplicated it's being actually ng-repeated by this part of your template:
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
I guess it's because of the second ng-repeat on item.compositions, can you provide a set of data ?
I'm not sure but you can try this in the inner repeater:
<div id="compositions{{$index}}" class="repertoire-compositions collapse">
<div class="repertoire-composition" ng-repeat="composition in item.compositions">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>
I have a list in my ionic project with some icons that I want to click. But I cannot get the click to be picked up either by the htmll onclick() or by the AngularJS ng-click. My html looks like this:
<ion-view view-title="CUES - WATCH LIST">
<ion-content>
<div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
<ion-list>
<ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
<div class="watchlist-movie-thumb">
<img class="movie-thumb-image" src="{{watchlistitem.picture}}">
</div>
<div class="col-75 watchlist-title-genre-container">
<div class="watchlist-movie-title">
{{watchlistitem.title}}
</div>
<div class="watchlist-movie-genres">
{{watchlistitem.genres}}
</div>
</div>
<a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
<i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
</a>
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The fact that even the onclick() doesn't pick up the click is very odd. I have tried changing the z index to 9999 but that has made no difference.
I stumbled across an answer by trying every html mod I could think of.
This is a bit of a bodge but works without compromising the layout.
I simply added a margin-right style to the tag as follows:
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>
It doesn't seem to matter with respect to fixing the click problem what value I give the margin-right as long as it is there. It does though alter the layout as you would expect.