Im trying to make ngstyle give an interface a list view for the users easily and have encountered an issue someone may be able to assist with.
I am trying to use ngstyle and ngmodel to both alter the style and hide icons when a button is clicked, ideally I would like a button that allow you to switch between list and tile view modes.
Here is the checkbox system as it stands (which is clunky and not user friendly, but works).
<p style="color:black; font-size:14px; margin-left:50px;" class="label">List View
<input type="checkbox" ng-model="visible" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'7px', 'font-size':'14px'}">
</p>
<p style="color:black; font-size:14px;" class="label">Tile View
<input type="button" ng-model="unchecked" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={}">
</p>
And here is what ive done to the icons so they hide when checked:
.hideItem {
visibility: hidden;
}
<i ng-class="{'hideItem': visible}" class="icon fa fa-bookmark-o"></i>
What I need is for preferably a single button that is "Change View" which accomplishes the same task Im achieving here but easier.
Any assistance or ideas would be greatly appreciated.
Mant thanks in advance
You could use ng-show directly as it is a directive built into Angular to toggle state between two buttons - the tile view button and the list view button. The one that is displayed can be toggled by an expression
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">List View</button>
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">Title View</button>
The expression in ng-show if truthy will display the button and if falsy will hide the button. You can use the same expression in each of these button tags and just invert the expression using !
In the Javascript, you would toggle the expression to/from truthy with changeView()
Here is a link to the documentation on ng-show:
https://docs.angularjs.org/api/ng/directive/ngShow
Ended up using ng-class as below:
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" class="dropdown-menu">
<li role="menuitem"><a ng-click="tog=1" style="text-transform: initial;" uib-tooltip="New List View" ng-model="tileView">List View</a>
<!--a(ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'5px', 'font-size':'14px', 'margin-left':'5px',}" style="text-transform: initial;", uib-tooltip="New List View", ng-model="listView") List View-->
</li>
<li role="menuitem"><a ng-click="tog=2" style="text-transform: initial;" uib-tooltip="Original Tiled View" ng-model="tileView">Tile View</a></li>
</ul>
And bound it using the following:
<a uib-tooltip="{{item.Title}}" ng-repeat="item in linkList = (WorkspaceCtrl.workspaceLinkStore.list | filter:{Active:true} | limitTo:WorkspaceCtrl.itemsPerCategory)" ng-href="{{item.Url}}" target="_blank" ng-class="{items:tog==1}" class="item">
<p class="title">{{item.Title}}</p></a>
Related
In my angular, I have a dropdown component. Here is how it looks like:
<div dropdown placement="bottom left" #dropdown="bs-dropdown" [autoClose]="true"
[insideClick]="true" [container]="body">
<a class="templates-icon" dropdownToggle (click)="toggleTextTemplates();">
<i #one class="ic-text-templates" aria-hidden="true"></i>
</a>
<ng-container *ngIf="toggle" >
<div *dropdownMenu class="templates-container dropdown-menu"
role="menu" aria-labelledby="button-basic">
</ng-container>
</div>
Here in this example, container attribute is set to body and therefore the dropdown is bind with the body and visible top of each element.
Now let say I have three layer in my app. Layer-one, layer-two and layer-three and they are top of each other. Now I would like to display the dropdown only on layer-two (or imagine in middle layer). So I would like to bind this dropdown with layer-two based on id, so that drodown will be visible on top of layer one and two, but not the layer three:
<div id="layer-one">
some element 1
<div id="layer-two">
some element 2
<div id="layer-three"> some element 3</div>
</div>
</div>
Can someone please give me an idea, or solution how I can achieve that?
Have you tried to just place the dropdown at layer 2? otherwise you can can use javascript like: getElementByID('#33').innerhtml
or make CSS index rules, where there is a attribute called index: (-1) or (1) etc. for the placement of the dropdown
While using external library footable(for a responsive table) with angular 2, I am losing all event bindings i.e (click).
Tried ngZone, ChangeDetectorRef,ApplicationRef. but no result not able to bind back my all lost angular events.
Below I have written down my code snippet where after calling an API I get a list and using *ngfor i populate my table.
But after Footable.init() am losing binding of method deactivateHospital(). And when I try using click event, deactivateHospital() doesn't work. If I comment footable then my code works fine. Any idea how to bind back my deactivateHospital() back? I know the external javascript library is causing some issue. Do we have any solution for this?
Adding plnkr: http://plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview
<tr data-expanded="true" *ngFor="let hospital of hospitalList">
<td class="hospital-name">{{hospital.name}}</td>
<td ><span class="ha-name">{{hospital.admin}}</span><br><span class="ha-id">{{hospital.emailId}}</span>
</td>
<td>{{hospital.hsa_count}}</td>
<td>{{hospital.pcm_count}}</td>
<td>{{hospital.pcv_count}}</td>
<td>{{hospital.surgeons_count}}</td>
<td>{{hospital.prefcards_count}}</td>
<td class="active-status"><span class="active-bubble" ></span>
Active
<span class="dropdown">
<span class="dropdown-toggle mr-l-10" type="button" data-
toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></span>
<ul class="dropdown-menu">
<li ><a (click)="deactivateHospital(hospital.id)" ><span
class="active-bubble"></span> Inactive </a></li>
</ul>
</span>
</td>
</tr>
//angular code
this.hospitalList = data["hospitals"];
console.log(this.hospitalList);
setTimeout(()=>{
FooTable.init($('.table'),{},()=>{
console.log('hi..');
});
},0);
deactivateHospital(id){
console.log('id',id);
}
I have had the same problem in Angular 4 and 5 with the FooTable. But when I changed the a tag to a button it started working again. I then styled the button to look like a a tag.
<ul class="dropdown-menu"><li ><button class="footablebutton" (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </button></li></ul>
CSS
.footablebutton {
background:none!important;
color:#337ab7;
border:none;
padding:0!important;
font: inherit;
cursor: pointer; }
.footablebutton :hover {
color:#23527c; }
I can't seem to make the drop-down work. When you click on 'action' nothing happens.
I double-checked the CSS and JS links and all seems ok, tried with Bootstrapv4 and 3.3.7 and none works. Any thoughts?
Check my app https://codepen.io/thomasfaller/pen/NpGpPP
<iframe height='265' scrolling='no' title='XE.com WebApp' src='//codepen.io/thomasfaller/embed/NpGpPP/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/thomasfaller/pen/NpGpPP/'>XE.com WebApp</a> by Thomas Faller (<a href='http://codepen.io/thomasfaller'>#thomasfaller</a>) on <a href='http://codepen.io'>CodePen</a>.
You are trying to use bootstrap dropdown as a select input. Dropdowns are supposed to just call some actions, not behave like "select" elements. So there is no such functionality out of the box as you want. You have to have some JS to make it work.
So my very quick and dirty solution just to make it work:
1) Assign id="selected" to currently selected value:
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-eur" aria-hidden="true" id="selected"></i>
</button>
2) Assign onclick handler on dropdown items:
<a class="dropdown-item" onclick="select('eur')"><i class="fa fa-eur" aria-hidden="true"></i></a>
3) And this handler could be like this:
function select(currency) {
let selected = document.getElementById('selected');
selected.className = `fa fa-${currency}`
}
Codepen: https://codepen.io/anon/pen/KWdOxa
But you still have to save somehow a selected value to make your calculations proper in JS code.
So you had better use a special bootstrap element for select inputs - https://silviomoreto.github.io/bootstrap-select/
I am working to add keyboard functionality to my Dropdown List, below is the directive template. I am passing in data through isolate scope bound to "ctrl". I am using Angular and Bootstrap. I'm wondering if anybody out there knows a good solution for efficiently allowing a user to move up and down through the list. I think I am getting stuck mostly on having to have the angular "ng-keydown" directive on the button, and then moving from there and being able to focus an item with the up/down keys. And then being able to select a list item with the space bar.
<div class="dropdown select-container" ng-class="{'open' : ctrl.isOpen}">
<div class="form-group" ng-if="ctrl.filterMode === 'off'">
<button class="btn btn-default form-control" type="button" ng-keydown="ctrl.onButtonKeydown($event)" ng-click="ctrl.toggleDropdown($event)" ng-disabled="ctrl.ngDisabled === true">
{{ctrl.selectedRow[ctrl.propertyName] ? ctrl.selectedRow[ctrl.propertyName] : ctrl.selectLabel}}
<div class="pull-right"><i ng-class="{'fa fa-angle-up': ctrl.isOpen, 'fa fa-angle-down': !ctrl.isOpen}"></i></div>
</button>
</div>
<ul class="dropdown-menu list-group" ng-disabled="ctrl.ngDisabled === true">
<li class="list-group-item" ng-repeat="row in ctrl.rows | filter: ctrl.filterText" ng-class="{'active': row === ctrl.selectedRow, 'disabledStandardList': ctrl.ngDisabled}"
ng-click="ctrl.onSelectedLocal(row)">
{{row[ctrl.propertyName]}}
</li>
<li class="list-group-item text-center" ng-show="ctrl.rows.length <= 0 || (ctrl.rows | filter: ctrl.filterText).length <= 0">
{{ctrl.emptyMessage}}
</li>
</ul>
</div>
I'm not able to get any keydown event unless the directive is on the button because the dropdown is hidden until the user clicks on the button to open it. Once the Dropdown list is open I want the user to be able to move up and down and highlight the current row as he or she is moving, as well as be able to select a row. Is it possible to use the css :focus class to add the list as the user moves up and down?
I have a somewhat working JQuery example but I feel like its hacked together and I'm trying to avoid JQuery as much as possible and use Angular/Vanilla Javascript. If you have a solution that uses some jquery though please share! I've seen some other similar examples around but nothing that has helped me. Any help is appreciated. Thanks
I am trying to change icon (i.e plus, minus) on click in expand collapse accordion, I am using Font Awesome class for icons. I know it is easily possible with jquery but if there is any way in angularjs, then please let me know.
HTML looks like:
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne{{test}}">
Test
</a>
You should be looking at ng-class.
Short example...
in your template:
<span ng-click="flag = !flag" ng-class="{ active : flag }">
click me!
</span>
in your css:
.active { color: red; }