I'm pretty new in Knockout JS binding and I have this table which is supposed to be a row with a single column with the button if the Confirmed text is empty and two separate columns in other way.
Here is what I've tried so far,
<table class="table" id="Mytable" style="table-layout: fixed;">
<tbody data-bind="foreach: info">
<tr>
<td style="vertical-align:middle;">
<button type="button" class="btn2 btn-default" data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5, css: Confirmed == '' ? colspan='2' : ''">22</button>
</td>
<td style="vertical-align:middle">
<span style="color:green" data-bind="text: Confirmed, visible: Confirmed != ''">10</span>
</td>
</tr>
</tbody>
</table>
but it seems that it doesn't display the info correctly and I don't know what am I doing wrong.
Please be gentle with me, I'm trying to learn from mistakes.
colspan is an attribute, which you set using the attr binding:
data-bind="attr: { 'colspan': Confirmed() ? 1 : 2 }"
In your specific case, I'd use a virtual if binding to switch between the two cases:
<table>
<tbody data-bind="foreach: info">
<tr>
<!-- ko if: Confirmed -->
<td colspan="2">
<button type="button"
data-bind="click:$root.getClick, trimText:shortName, trimTextLength: 5">22</button>
</td>
<!-- /ko -->
<!-- ko ifnot: Confirmed -->
<td></td>
<td>
<span data-bind="text: Confirmed"></span>
</td>
<!-- /ko -->
</tr>
</tbody>
</table>
Related
Using angularjs with bootstrap 3 here.
I am trying to create dynamic rows when user clicks button. I have wrapped this inside a table and using ng-repeat.
When the second row is added it creates a separation b/w the two.
Below is my code:
<table class="table table-borderless">
<thead>
<tr>
<td>Text</td>
<td>Value</td>
</tr>
</thead>
<tbody ng-repeat="m in options">
<tr>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
<td>
<a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" class="form-control" ng-model="Name" required />
</td>
<td>
<input type="text" class="form-control" ng-model="Country" required />
</td>
<td>
<a class="btn btn-xs" ng-click="Add()"><i class="glyphicon glyphicon-plus"></i></a>
</td>
</tr>
</tfoot>
</table>
I also created a demo at:
http://jsfiddle.net/Lyxbhosv/
Any inputs on how to remove the line or border in between two TD
I am not entirely sure what you're asking but via your example there is a double border whenever another row is added. To remove the double border and keep it a single just modify your code with the following:
<tbody ng-repeat="m in options" style="border: none;">
If you can explain further that would be great!
While I'm examining your code you have already awarded the answer. But here I'm coming up with what I have learned from your code and this answer:
<tbody ng-repeat="m in options" style="border: none;"> This will create lots of Repeatable `' in your code.
But if you placed your code 'ng-repeat="m in options"' to the child <tr>' tag it will repeat the ` each time. and it will not create any repeatable border any more.
<tbody>
<tr ng-repeat="m in options">
So the choice is yours!
I have the below table structure
<table style="width: 100%;">
<tr>
<td><b>Fund Value:</b></td>
<td data-bind="text: ItemDetails().FundValue"></td>
<td><b>Fund Code:</b></td>
<td data-bind="text: ItemDetails().FundCode"></td>
<td><b>Fund Desc:</b></td>
<td data-bind="text: ItemDetails().FundDesc"></td>
</tr>
<tr data-bind="foreach: ItemDetails().PriceRebates">
<td><b>Rebate Value:</b></td>
<td data-bind="text: RebateValue"></td>
<td><b>Rebate Code:</b></td>
<td data-bind="text: RebateCode"></td>
<td><b>Rebate Desc:</b></td>
<td data-bind="text: RebateDesc"></td>
</tr>
</table>
It's bound to the knockout viewmodel. The issue I am having is that the tr is bound to the foreach loop and so it is creating multiple td for the ItemDetails().PriceRebates knockout data which I do not want. I want multiple tr to be created for the ItemDetails().PriceRebates data. Can someone please tell me how I can achieve that.
Thanks
You can use foreach without a container element:
<!-- ko foreach: ItemDetails().PriceRebates -->
<tr>
<td><b>Rebate Value:</b></td>
<td data-bind="text: RebateValue"></td>
<td><b>Rebate Code:</b></td>
<td data-bind="text: RebateCode"></td>
<td><b>Rebate Desc:</b></td>
<td data-bind="text: RebateDesc"></td>
</tr>
<!-- /ko -->
I have a table that is bound to an knockout observableArray:
<table class="table table-hover table-condensed">
<tbody data-bind="foreach: screens">
<tr data-toggle="collapse" href="#collapse"> // how can i bind the individual id?
<td><span data-bind="text: computerName"></span>
<!-- ko if: supporter -->
<span class="label label-primary">S</span>
<!-- /ko -->
</td>
<td data-bind="text: computerKennung"></td>
<td data-bind="text: nummer"></td>
<tr>
<tr data-bind="attr: { id: 'collapse' + oid}" class="collapse">
<td colspan="3">
<button class="btn btn-primary" data-bind="click: edit">Edit</button>
<button class="btn btn-primary" data-bind="click: delete">Delete</button>
</td>
</tr>
</tbody>
</table>
Every row should be clickable and collapse an additional row below, where i have buttons for actions. According to the bootstrap samples i need an id, which is called in the href-Target. But every row has a different oid and i don't know how many items are in the array.
Can i bind the href-Target via Knockout in any way? Is there a better way for collapsing a table row with unknown ids?
You can bind the href in the same manner as you're binding the id on the second row using the attr binding:
<tr data-toggle="collapse" data-bind="attr: { href: '#collapse' + oid }">
I have a table I decorated with bootstrap.
Here is the simple table view (collapsed).
Each table row has two horizontal sets of data. So the expanded view for each row shows up when the "Details" button is clicked. Here's the expanded view.
The first set of data of each row has 4 columns. While I'd like the second set of data of the same row to fully occupy the whole table width.
The problem is that the way I did it doesn't feel the best way to do it.
I pretty much used Angular loop construct to repeat the <tr>. I then embedded two tables per <tr> so that I can display the first data set in the first table and the expanded view in the second table. Clicking on the "Details" button shows the second set (table) of data of row.
<table class="table-hover table-condensed">
<!--<table class="table">-->
<thead>
<tr>
<th align="left" class="span2">Date</th>
<th align="left" class="span2">Title</th>
<th align="left" class="span2">Bill Total</th>
<th align="left" class="span4">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ibill in user.groups[0].bills | filter:query | orderBy:'date'">
<td colspan="4">
<table>
<tr>
<td class="span2">{{ ibill.billDate | date:'MM/dd/yyyy'}}</td>
<td class="span2">{{ ibill.title }}</td>
<td class="span2">${{ ibill.billTotal }}</td>
<td class="span4">
<!-- <a ng-click='deleteBill(ibill.id)'><i class="icon-trash "></i></a>
<i class="icon-pencil "></i>--> <a ng-click='deleteBill(ibill.id)' class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class=" icon-trash"></i></a>
<i class="icon-edit"></i>
<a class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-eye-open"></i> details</a>
<!--<a class="btn" ng-init="ibill.isCollapsed=' true'" ng-click="ibill.isCollapsed=! ibill.isCollapsed"><i class="icon-folder-open "></i> Details</a>-->
</td>
</tr>
</table>
<table>
<tr>
<td colspan="4">
<div collapse="ibill.isCollapsed">
<div>
<p ng-repeat="simplecost in ibill.billSimpleEntry.simpleUserIdAndLiableCost">{{simplecost.user.fName}} owes ${{simplecost.liableCost}}</p>
</div>
</div>
</td>
</tr>
</table>
</td>
<!--<td>{{ibill}}</td>-->
</tr>
<!-- <tr>
<td><div collapse="ibill.isCollapsed">
<div class="well well-large">Some content</div>
</div></td>
</tr>-->
</tbody>
</table>
I'm pretty much e
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tbody>
</table>
Is it possible to do the same with a table-less design (eliminating two tables per row)
You could just use the colspan attribute on a td to achieve the same effect without the tables. Ex:
<table>
<tbody>
<tr> <!--normal row stuff-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan='4'><!--details stuff here--></td>
</tr>
</tbody>
</table>
In this example, the td with colspan='4' will be a single cell that is the same width as the 4 cells in the previous row.
Not sure what's up with this, but the visible property does not seem to work using foreach.
This works (displays Testing 2 only):
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: $data.firstName"></td>
<td data-bind="text: $data.lastName"></td>
<td>
<div data-bind="visible: false">
Testing 1
</div>
<div data-bind="visible: true">
Testing 2
</div>
</td>
</tr>
This doesn't work (displays both):
//boolean values = makeFalse is false and makeTrue is true
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: $data.firstName"></td>
<td data-bind="text: $data.lastName"></td>
<td>
<div data-bind="visible: $data.makeFalse">
Testing 1
</div>
<div data-bind="visible: $data.makeTrue">
Testing 2
</div>
</td>
</tr>
Any ideas on how to get it to work?
I remember getting stuck on something like this. Try using ().
<div data-bind="visible: $data.makeFalse()"></div>
<div data-bind="visible: $data.makeTrue()"></div>