I have a button that I want to toggle the class when clicked.
This is what I currently have.
<table>
<tbody data-bind="foreach: item ">
<tr>
<td><a data-bind="click: $parent.selectItem, text: Name, css: { 'whitishBtn button_small': selected(), 'greenishBtn button_small': !selected() }"></a></td>
</tr>
</tbody>
</table>
it almost works. When green it works as expected but only has whitishBtn class when white.
figured it out
selected() ? 'greenishBtn button_small':'whitishBtn button_small'"
Related
I am trying to create a Custom Element that allows me to collapse itself from a simple click delegate, but it doesn't seem to work.
I have this code in my js file
import {inject, bindable, bindingMode} from 'aurelia-framework';
export class DataGridCustomElement {
#bindable({ defaultBindingMode: bindingMode.oneTime }) columns = [];
#bindable({ defaultBindingMode: bindingMode.oneTime }) items = [];
#bindable() collpased = true;
collapseClick() {
this.collapsed = !this.collpased;
}
}
And here is my HTML file
<template>
<require from='./data-grid.css'></require>
<div class="collapse-arrow" click.delegate="collapseClick()">
<span class="collapse-icon glyphicon ${collapsed ? 'glyphicon-plus' : 'glyphicon-minus'}" aria-hidden="true"></span>
<span>Order Lines</span>
</div>
<div class="collapse-block" css="${collapsed ? 'display:none;' : 'display:block;'}">
<table class="data-grid">
<thead>
<tr>
<td repeat.for="column of columns">
${column.title}
</td>
</tr>
</thead>
<tbody>
<tr repeat.for="item of items">
<td repeat.for="column of columns">
${item[column.propertyName]}
</td>
</tr>
</tbody>
</table>
</div>
</template>
The crazy thing is it just doesn't seem to at all. It shows collapsed as being false from the get go, even though I set it to true in the class.
I am calling it like so
<data-grid columns.bind="invoiceColumns" items.bind="lineData"></data-grid>
Any ideas? Am I missing something about Custom Elements?
Easy solution. You have a typo in this.collapsed = !this.collpased;.
Let me setup the question with a simple case.
I have an HTML table, the rows of which are controlled by an observableArray. It works great.
If the observableArray has zero elements in it however, I want a single row to say so. I tried this markup, which "kind of" works:
<tbody data-bind="if: $root.data.contacts().length == 0">
<tr>
<td>There are no contacts specified yet.</td>
</tr>
</tbody>
<tbody data-bind="foreach: $root.data.contacts">
SNIP - a tbody with the rows is here when elements > zero
</tbody>
When I say "kind of", I mean VISIBLY. It really does show up at zero elements and really does go away at > zero elements like what you would expect. However when you open the DOM inspector (dev tools) and look at the DOM in memory, you find that there are TWO tbody sections, not one. Now one tbody is always empty of course, but two tbody tags is not HTML5 correct, so this must be fixed this is not the desired markup.
Being a Knockout newbie, I tried to fix this problem with a virtual element:
<!-- ko if: $root.data.contacts().length == 0 -->
<tbody>
<tr>
<td>There are no contacts specified yet.</td>
</tr>
</tbody>
<!-- /ko -->
Unfortunately this doesn't work for our build process: we minify HTML prior to compression and comments get eliminated.
I was under the impression that KO bindings applied to the CONTAINER ELEMENT ITSELF as well as descendants, but this seems to not be so. Is there a way to tell KO to apply to container elements as well as children, or do I need to change the markup in some way OTHER THAN a virtual container?
Like you, my first choice would be virtual tags for an if binding. But since that's not an option, how about swappable templates?
var vm = {
contacts: ko.observableArray()
};
ko.applyBindings(vm);
setTimeout(function() {
vm.contacts(['One', 'Two', 'Three']);
}, 2500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id="empty-body">
<tbody>
<tr>
<td>There are no contacts specified yet.</td>
</tr>
</tbody>
</template>
<template id="normal-body">
<tbody data-bind="foreach: contacts">
<tr>
<td data-bind="text:$data"></td>
</tr>
</tbody>
</template>
<table data-bind="template: contacts().length === 0 ? 'empty-body' : 'normal-body'"></table>
The Knockout-Repeat binding applies the binding to the element itself. It does so by using a node preprocessor to wrap elements with the repeat binding in virtual (comment-based) elements at run time.
var vm = {
contacts: ko.observableArray()
};
ko.applyBindings(vm);
setTimeout(function() {
vm.contacts(['One', 'Two', 'Three']);
}, 2500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://rawgit.com/mbest/knockout-repeat/master/knockout-repeat.js"></script>
<table>
<tbody data-bind="repeat: !contacts().length && 1">
<tr>
<td>There are no contacts specified yet.</td>
</tr>
</tbody>
<tbody data-bind="repeat: contacts().length && 1" data-repeat-bind="foreach: contacts">
<tr>
<td data-bind="text:$data"></td>
</tr>
</tbody>
</table>
I'm having a bit of trouble figuring something simple out. I have a large datatable, and I want that when hovering any column, a specific div (and different for each column) is loaded somewhere on the page, outside the table.
How should I go about that? I'm having trouble defining columns (I'm using jquery dataTables), and then finding a way to load a different image for each column.
Here is my current code that doesn't take columns into account:
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
And the HTML:
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
....
</tbody>
Thanks!
Im not sure if this is what you want, but check it out:
This code will show the name of the div you are hovering in another div.
https://jsfiddle.net/5jy071t5/4/
HTML
<ul>
<li name="first">Hoover me</li>
<li name="second">And me</li>
</ul>
<div id="output"></div>
Javascript
$( "li" ).hover(
function() {
$("#output").html($(this).attr("name"));
//you can also load an image if you like
}, function() {
$("#output").html("");
}
);
It works as charm. Maybe you were missing either id or class.
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
.loaded{
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>
I want to restrict the displaying the records of table.
I can able to restrict the table rows with style property of row.But when I am using that style it is giving the UI problems like on mouse over is missing for entire row.
Now mouse over should be there in this table on every table record.
I am using below code.
<tr style="display: block;"></tr>
Is there any way to hide the rows other than the above code.
I want to restrict the table row with out using the style property.
<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>
<c:forEach var="article" items="${vp_kb_articleList}" varStatus="loopStatus">
<tr id="<%=rowId++%>" class="myrow">
<td class="vp_kb_article" > see this code <a class="detaillist" href="${vp_kb_articlePageUrl}?articleId=${article.id}"> ${article.title}<br>
<span class="vp_kb_details">${article.description}</span>
<span class="vp_kb_article_id">${article.id}</span> </a>
</td>
</tr>
</c:forEach>
JS
$(document).ready(function() {
$(".myrow").hide();
});
Given a json like this:
{
"name": "john"
"colours": [{"id": 1, "name": "green"},{"id": 2, "name": "blue"}]
}
and two regular html inputs:
<input type="text" name="name" />
<input type="text" name="color" />
<input type="submit" value="submit" />
I need to build a table with all the possible variations, ex:
John green
John blue
That means that if a user continues adding values through the inputs new rows will appear building the new variations, for instance:
I also need to have available the id to handle it, and I need that when I add new values using the inputs for instance: "Peter" "Black", I need to autofill the id (colour id) dynamically like an auto increment in mysql, resulting in something like this:
{
"colours": […...{"id": 3, "name": "black"}]
}
Is that possible? Which options do I have for doing that with angular? I'm still thinking in the jQuery way and I would like to do it in the angular way.
I took a look to hg-repeat, and used it, but I'm not figuring out how to deliver the expected result, the only thing that come to my mind was to use nested ng-repeats, but it didm´t work.
Thanks so much in advance,
Guillermo
Just want to share with what I used so far to save your time.
Here are examples of hard-coded headers and dynamic headers (in case if don't care about data structure). In both cases I wrote some simple directive: customSort
customSort
.directive("customSort", function() {
return {
restrict: 'A',
transclude: true,
scope: {
order: '=',
sort: '='
},
template :
' <a ng-click="sort_by(order)" style="color: #555555;">'+
' <span ng-transclude></span>'+
' <i ng-class="selectedCls(order)"></i>'+
'</a>',
link: function(scope) {
// change sorting order
scope.sort_by = function(newSortingOrder) {
var sort = scope.sort;
if (sort.sortingOrder == newSortingOrder){
sort.reverse = !sort.reverse;
}
sort.sortingOrder = newSortingOrder;
};
scope.selectedCls = function(column) {
if(column == scope.sort.sortingOrder){
return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
}
else{
return'icon-sort'
}
};
}// end link
}
});
[1st option with static headers]
I used single ng-repeat
This is a good example in Fiddle (Notice, there is no jQuery library!)
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
[2nd option with dynamic headers]
Demo 2: Fiddle
HTML
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in table_headers"
class="{{header.name}}" custom-sort order="header.name" sort="sort"
>{{ header.name }}
</th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<pre>pagedItems.length: {{pagedItems.length|json}}</pre>
<pre>currentPage: {{currentPage|json}}</pre>
<pre>currentPage: {{sort|json}}</pre>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
<td ng-repeat="val in item" ng-bind-html-unsafe="item[table_headers[$index].name]"></td>
</tr>
</tbody>
</table>
As a side note:
The ng-bind-html-unsafe is deprecated, so I used it only for Demo (2nd example). You welcome to edit.
Here's an example of one with dynamic columns and rows with angularJS: http://plnkr.co/edit/0fsRUp?p=preview
TGrid is another option that people don't usually find in a google search. If the other grids you find don't suit your needs, you can give it a try, its free
Check out this angular-table directive.
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th ng-repeat="header in headers | filter:headerFilter | orderBy:headerOrder" width="{{header.width}}">{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" ng-class-odd="'trOdd'" ng-class-even="'trEven'" ng-dblclick="rowDoubleClicked(user)">
<td ng-repeat="(key,val) in user | orderBy:userOrder(key)">{{val}}</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
refer this https://gist.github.com/ebellinger/4399082
First off all I would like to thanks #MaximShoustin.
Thanks of you I have really nice table.
I provide some small modification in $scope.range and $scope.setPage.
In this way I have now possibility to go to the last page or come back to the first page.
Also when I'm going to next or prev page the navigation is changing when $scope.gap is crossing. And the current page is not always on first position. For me it's looking more nicer.
Here is the new fiddle example:
http://jsfiddle.net/qLBRZ/3/