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.
Related
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>
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I have a table, I am already given it CSS using ng-class if they satisfy a condition. Now I want to show only those rows who satisfy the same condition on a button click. I have wrote a controller which checks if the data received is within 24 hours are not and marks the data cell. Until this it's working.Now I need to add a button and show only the row which has this td marked as not received in time.
<tbody>
<tr ng-repeat ="data in log">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime
}}
</tbody>
</table>
I think something like this should work. Basically, clicking the button will toggle between showing all or only the items marked as 'data not received'.
<tbody>
<tr ng-repeat ="data in log" ng-show="showAll || dataNotReceived(data.receivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime}}
</tr>
</tbody>
// in controller
$scope.showAll = true;
$scope.onButtonClick = function() {
$scope.showAll = !$scope.showAll;
return false;
}
From the information provided in question what I can say is: Use ng-show to show rows based on your condition.
<tr ng-show ="your_condition">
You could also use an ng-if rather than ng-show. See the differences here.
Really depends on how often the hide/show toggle needs to happen.
<tbody>
<tr ng-repeat="data in log" ng-if="showLast24Hrs(data.ReceivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td>{{data.ReceivedTime}}</td>
</tbody>
and then in the controller,
$scope.showLast24Hrs = function(receivedTime){
if($scope.isLast24Hours) {
return receivedTime < 200; // Write your less than 24 hours check here
}
return true;
}
I wrote this demo on Codepen. Hope that helps.
Let's say I have a row that looks like
<tr>
<td>John</td>
<td>Smith</td>
<td>Approved?<input type="checkbox"/></td>
</tr>
Each row shows one employee, and allows you to check to approve/disapprove the employee (e.g. for registration for a course). I want the user to be able to click anywhere on the row to get greater detail about the employee, but if they click on the last column ("Approved?") it should not go to greater detail, since it should just change the checkbox.
Here are the solutions I know of, none is great:
Entire row: <tr class="clickable" ng-click="go()">. Makes all the cells and margins clickable, and only requires one ng-click entry, but then the checkbox causes "go()" to execute, which is bad.
Each cell: <td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">. Pro: can restrict to just the cells I want. Con: lots of repetition (not DRY), and misses the margins.
Entire row with special "go" fn: <tr class="clickable" ng-click="go()">, but "go" knows how to differentiate between different cells. Pro: Has exactly the effect. Con: requires lots of view/html knowledge in a specialized controller action.
How can I make the first 2 columns and their margins clickable, but not the 3rd or its margins?
You can use two click handlers, one for a whole tr , second for a last td' checkbox. In the second use Event's stopPropagation method.
Controller:
var TableCtrl = function($scope){
$scope.click1 = function(){
console.log("Click 1 method")
}
$scope.click2 = function(e){
console.log("Click 2 method");
e.stopPropagation();
}
}
Markup:
<table ng-controller="TableCtrl">
<tr ng-click="click1()">
<td>John</td> <td>Smith</td>
<td>Approved?<input type="checkbox" ng-click="click2($event)"/></td>
</tr>
</table>
Working example: http://jsfiddle.net/zDMQB/1/
How about this?
<tr>
<td style="cursor: pointer;" ng-click="alert('hello1')">John</td>
<td style="cursor: pointer;" ng-click="alert('hello2')">Smith</td>
<td>Approved?<input type="checkbox"/></td>
</tr>
I am using underscore.js's templating capabilities from backbone.js, I have the following template that I define in my page like this:
<script type="text/template" id="businessunit_template">
<tr data-uid="{{Uid}}">
<td class="first"><span>{{Name}}</span></td>
<td class="{{StatusClass}} tac">{{OverallScore}}%</td>
<td>
<a class="impactanalysis individualBu" href="#"> </a>
</td>
</tr>
</script>
I am attaching the trs to the tbody element of following table:
<table class="listing">
<thead>
<tr>
<th class="first">Business Units</th>
<th>BCMS<br />Status</th>
<th>View</th>
</tr>
</thead>
<tbody id="reportBusinessUnits"></tbody>
</table>
My individual backbone view that renders the tr looks like this:
class ReportBusinessUnitView extends MIBaseView
initialize: (options) ->
#vent = options.vent
#template = _.template($('#businessunit_template').html())
events:
"click .individualBu": "showBusinessUnitDetail"
showBusinessUnitDetail: (e) =>
e.preventDefault()
self = #
#vent.trigger('management:showbusinessunitdeail', #model)
render: =>
$(#el).html(#template(#model.toJSON()))
#
The problem is, the rendered output has a div around the tr and I have no idea where it is coming from:
<div>
<tr data-uid="a5e3c218-1ca4-4806-b27e-24a25ed83ab6">
<td class="first"><span>Central Networks</span></td>
<td class="red tac">4%</td>
<td>
<a class="impactanalysis individualBu" href="#"> </a>
</td>
</tr>
</div>
I just cannot see what I am doing wrong. Has anybody any idea where this could be coming from?
That looks very much like the kind of faulty DOM fragment you get when you haven't declared the .el attribute in a View correctly. I'd put a breakpoint/debugger statement in ReportBusinessUnitView.render() and inspect the value of the this.el attribute from there. (View.el docs).
Also, check your code:
Have you declared an .el property? (in MIBaseView for example)
Does it hit the right DOM node?
If not, Backbone auto creates the DIV node for you, which can be confusing.
The inclusion of a default DIV tag to surround the template is, I believe, a safety measure. This gives a parent tag to which the view's events are attached. That way event propagation will work as expected. As well, if you discard a view and remove the inserted HTML all events will go with it allowing the garbage collector to do its job.
I recently had considerable grief because I set the .el to the static HTML parent node (in order to prevent the default DIV from being added). Since it remained even after my dynamic HTML was replaced the events were still around responding to actions and creating general chaos!