I need to have an overall Show/Hide click to show or hide all the detail divs of a list of "panels" of data. Also within each panel, there is a Show/Hide click to individually show or hide that div of data.
I think that if the overall show/hide is clicked that the individual click values should be set equal to overall value when clicked. That way if the individual ones are changed, they are all set to show or hide when the main one is clicked.
This is how I tried to do that:
<div>- Hide All Details / + Show All</div>
<div class="tender-list" ng-repeat="row in tenders" ng-include="'tender/tender_panel.html'"></div>
Where the hide/show part of tender_panel.html is here:
<div>- Hide Details</div>
<div class="tender-details" ng-hide="hideDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
There is another table above the tender-bottom-table. Plus a another table after.
What is happening is that it works fine when initially loaded. The Hide All/Show All works. Then I click on the individual show/hides and they work. But then the All Show/All Hide no longer works and I don't see how clicking the individual links breaks things.
This app is Symfony2 with Angular and Bootstrap.
Any help would be greatly appreciated.
one thing you could try is to have a property flag in each tenders item that sets if it's shown/hidden and show the individual item based on if hideAllDetails + their flag is true:
<div>- <a href='#' ng-click="hideAllDetails = ! hideAllDetails;">Hide All
Details / + Show All</a></div>
<div class="tender-list" ng-repeat="row in tenders" ng-
include="'tender/tender_panel.html'"></div>
tender_panel.html:
<div>- <a href='#' ng-click="row.hideDetails = ! row.hideDetails">Hide
Details</a></div>
<div class="tender-details" ng-hide="hideDetails || hideAllDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
Related
I am trying to add a "scroll to top of page" button inside an md-virtual-repeat-container. I am currently using $anchorScroll. I have set the hash to a table head (I have tried setting the hash inside and outside of the repeat container) and the md-virtual-repeat is set to repeat the tr's. When the button is clicked the table only scrolls up one item and stops, it doesn't scroll all the way to the top. Any ideas?
I think it might be because the browser thinks it only needs to scroll up one td to reach the hash because that is what is shown in the DOM but in reality it needs to scroll more.
Thank you in advance!
<md-virtual-repeat-container flex>
<table>
<thead id='scrollHash'>
<tr><th></th><tr>
</thead>
<tbody>
<tr md-virtual-repeat='data in repeatData'>
<td></td>
</tbody>
</table>
</md-virtual-repeat-container>
<md-button class='md-fab' ng-click'$scope.gotoTop()'>Top</md-button>
You can use md-top-index (read more here).
Try this:
In html:
<md-virtual-repeat-container md-top-index="topIndex">...</md-virtual-repeat-container>
<md-button class='md-fab' ng-click="gotoTop()">Top</md-button>
In controller:
$scope.gotoTop = function()
{
$scope.topIndex = 0;
}
Code here.
Hope this help.
I am using Angular ui-router to navigate pages and flexbox as a grid type solution. I am attempting to reproduce Google Image Search Result look where the black expanding div opens under the selected image. I also need the route to change when the image is selected which I have working. However the div opens after all the divs in the row. Now after the row which the selected item is located. Any help on a ng-if, directive or script that could help me do this would be greatly appreciated.
EDIT: After thinking about it more I think I would need a script/directive that detected divs in selected's row and then inserted the ui-view div after the row.
Here what I have so far:
HTML:
<div id="container">
<a ng-repeat="item in professionals | filter:{cat: cat} | filter:query"
ui-sref="bids.item({item: item.link})"
ui-sref-active-eq="selected">
<div>
...
</div>
</a>
<div ui-view></div>
</div>
CSS makes div a flex element and wraps the square `a` divs contained.
Partial that opens when clicked includes:
<div class="expand" data-ng-if=" need something to the extent of open only below selected items row">
I have 2 tables, one displayed, the other one hidden:
<div ng-show="displayed('active')" ng-controller="DataTablesCtrlA as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
<div ng-show="displayed('retired')" ng-controller="DataTablesCtrlB as datatables">
<table datatable="" dt-columns="datatables.dtColumns" dt-options="datatables.dtOptions" class="display"></table>
</div>
I have a toggle which controls the visibility of the tables, when button A is clicked, then table A is displayed and table B get hidden and vice-versa.
The issue I am facing is that when table B get displayed, the table header is not properly expanded. This is known and well explained on DataTables documention here.
Below a screenshot of the issue:
So I am using columns.adjust() like so:
In the View template:
<div class="btn-group">
<button ng-click="setDisplayed('active')"
ng-class="{active: displayed('active')}" class="btn btn-default">Active</button>
<button id="btn-retired" ng-click="setDisplayed('retired')"
ng-class="{active: displayed('retired')}" class="btn btn-default">Retired</button>
</div>
In the View controller:
//...
this.setDisplayed = function(toDisplay){
this.displayed = toDisplay;
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust().draw();
};
//...
The issue I am facing is that table B is still hidden when setDisplayed get called and the header stay "unexpanded".
Is there a clean way to solve this problem ?
One solution I have in mind would be to listen for changes on the table display style attribute and call colums.adjust() in the event handler. But this would require to change the directive link property.
I have an alert which shows up to the user when an array named lineItemsF.length is on zero. I am working on a single page app, so once the user logs in that array is going to be on zero, after a couple seconds the data will load so that array will have some items, so, the alert will disappear.
That alert is actually something that I am using in a filter, in a search box in this case, when the user types something in that search box and filter returns nothing, then the alert comes up.
I made a video for you to understand whats happening, just look at the red banner at the top of the screen which automatically remove once the data load. That's not what I want, all I want is to see that alert once the user types something incorrectly in the search box.
I though that using $pristine or $dirty will work, but I do not know if I used those attrs incorrectly.
here is the video my friends
<!--this is the alert-->
<div class="alert"
ng-show="!lineItemsF.length">Did not match any search criteria
</div>
<!--this is the alert-->
<div ng-repeat="lineItem in lineItemsF = (lineItems | filter:search)">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">{{:: lineLeague[0].leagueName}}</h3>
</div>
<div class="panel-body">
<table class="table table-bordered tables">
<thead class="tableHeader">
<tr>
...
</tr>
</thead>
any suggestions ?
Just put this in your alert conditions
<div class="alert"
ng-show="searchCriteria.length > 0 && !lineItemsF.length">Did not match any search criteria
</div>
searchCriteria is the value inside the search input, so it will be displayed only if the criteria is not null (or length > 0).
Use ng-cloak in your div
or
ng-show="lineItemsF.length!=0"
I am working on a directive that displays a table using ng-repeat directives. Each cell in the table may contain a button depending on the data. Here is the pertinent snippet of the template.
<tbody>
<tr ng-repeat="row in data.rows">
<td>{{ row.rowName }}</td>
<td ng-repeat="cell in row.cells">
<button id="button-{{ row.id }}-{{ cell.id }}"
class="btn btn-primary"
ng-show="cell.isActive"
ng-click="onClick(row.id, cell.id, $event)">Select</button>
</td>
</tr>
</tbody>
In the controller I have
$scope.onClick = function (rowId, cellId, event) {
$scope.selectedRowId = rowId;
$scope.selectedCellId = cellId;
$scope.selectedButtonId = event.target.id;
};
The goal is to make it such that when a user clicks a button in the table, that button becomes active. When the user clicks on another button, it will become active making the previously active button inactive. This functionality will be used to drive what is displayed on another section of the page.
I have tried a few things, but I think the most angular way of doing things is to use ng-class in the buttons to apply the active and inactive classes based on what button has been clicked. To this end, I am assigning them all unique ids and tracking which button has been clicked based on the event.
The problem is I can not figure out how to make the ng-class work. Is there some way I can get the id of the current button that I am in, or am I going about this completely wrong in the first place.
Thanks.
In your button code set the html ng-class attribute :
ng-class="active : selectedRowId = row.id & selectedCellId = cell.id"