We Keep Coding

Rendering HTML Correctly In NgRepeat using Components in AngularJS 1.7

I have a simple app which displays a fruit and its color inside a table. There is a table component and row component. The table component's HTML looks like this:
<table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></row-component>
</tbody>
</table>
The row component's HTML looks like this:
<tr>
<td>{{$ctrl.fruit.name}}</td>
<td>{{$ctrl.fruit.color}}</td>
</tr>
As you can see, the table component has an ngRepeat directive on the row component. The problem is that rendered markup looks like this:
<table-component class="ng-isolate-scope"><!-- ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Apple</td>
<td class="ng-binding">Red</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Banana</td>
<td class="ng-binding">Yellow</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits" class="ng-scope ng-isolate-scope"><tr>
<td class="ng-binding">Pear</td>
<td class="ng-binding">Green</td>
</tr></row-component><!-- end ngRepeat: fruit in $ctrl.fruits --><table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
</tbody>
</table></table-component>
The browser doesn't know how to handle the row-component tag and the table ends up looking like this:
What do I need to do to get the rows to render correctly? I have the full CodePen code here.

A simple solution would be to convert your component to a directive and add it to a tr element as an attribute
<table class="table table-condensed">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr row-component fruit="fruit" ng-repeat="fruit in $ctrl.fruits"></tr>
</tbody>
</table>
NOTE: i left the name of the component as is to be better understandable in your example, it would be better if you changed it to something more appropriate than row-component since it is not a component anymore.

How to perform an action for dynamic data by clicking on checkbox in a table

I'm using bootstrap table. In that I want to perform an action when i click on checkbox in table to get Item ID value.
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
Jquery function :
$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
alert("Hello");
var values = "";
$.each($("input[name='btSelectItem']:checked"), function(index, value) {
var data = $(this).parents('tr:eq(0)');
if(index > 0)
values ++;
values +=$(data).find('td:eq(1)').text();
});
alert(values);
});
When i click on checkbox my function was not calling, Kindly help me to resolve this. Thanks in advance
Below is my table Code :
<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>

Besides the selector was wrong, the problem is that bootstrap table js code captures the event when you click and stops its propagation, so it never bubbles up and you can't capture on a document level.
The good news is that it provides an API to capture such events. In this case you can use several events like onCheck, onCheckSome, as noted in the docs, e.g.:
$('#table-style').on("check.bs.table", myFunc);

Since you're already attaching the event handler to the input element, you don't need any further filter in on.
Try with:
$(document).on("click", "input[name='btSelectItem']", function(){ ... })

Angular ng-repeat show data before the filter is applied

so I've got a ng-repeat with filters applied which works great! but when i load this there is nothing showing in the table. After I've applied the filters then the data shows and when I delete the filters aka the queries then all the data shows on the table.
So my question is how do I make the table show all the data aka the content and only apply the filters when I write in the inputs....
Thanks!
<div class="container" ng-controller="AppCtrl">
<h1>HearthDB</h1>
Class: <input ng-model="classQuery">
Cost: <input ng-model="costQuery">
</br>
Type "Spell/Minion": <input ng-model="typeQuery">
Secret: <input ng-model="secretQuery">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Cost</th>
<th>Text</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data | filter:{playerClass: classQuery, cost: costQuery, type: typeQuery, text: secretQuery}" ng-if="content.collectible && content.cost">
<th>{{content.name}}</th>
<th>{{content.type}}</th>
<th>{{content.cost}}</th>
<th ng-bind-html="to_trusted(content.text)"></th>
<th>{{content.playerClass}}</th>
</tr>
</tbody>
</table>
</div>

Hey guys this is what i needed to solve my problem. hope this helps
<div class="container" ng-controller="AppCtrl">
<h1>HearthDB</h1>
Class: <input ng-model="classQuery.playerClass">
Cost: <input ng-model="costQuery.cost">
</br>
Type "Spell/Minion": <input ng-model="typeQuery.type">
Secret: <input ng-model="secretQuery.text">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Attack</th>
<th>Health</th>
<th>Type</th>
<th>Cost</th>
<th>Text</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data | filter: classQuery | filter: costQuery | filter: typeQuery | filter: secretQuery" ng-if="content.collectible && content.cost">
<th>{{content.name}}</th>
<th>{{content.attack}}</th>
<th>{{content.health}}</th>
<th>{{content.type}}</th>
<th>{{content.cost}}</th>
<th ng-bind-html="to_trusted(content.text)"></th>
<th>{{content.playerClass}}</th>
</tr>
</tbody>
</table>
</div>

Dropdown Rows with AngularJS

I have a following table of grouped items:
I want to display each item in dropdown rows under particular group. Would you mind to help how to make this with Angular JS?
I'm fetching all groups and items with a single JSON:
[
{"City":"NY",
"notes":"bla-bla",
"state":"Created",
,"description":"asdasdasda",
"locationId":1,
"waybillId":"",
"itemCount":3
"items":[{"itemId": "0001","status":"Created", "weight":23},
{"itemId": "0002","status":"Created", "weight":23}
{"itemId": "0003","status":"Created", "weight":23}
]
},
....
]
HTML:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>City</th>
<th>Waybill</th>
<th>Items</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="group in groupItems">
<td>{{$index+1}}</td>
<td>{{group.city}}</td>
<td>{{group.waybillId}}</td>
<td>{{group.itemCount}}</td>
<td>
<span class="label label-success">{{group.state}}</span>
</td>
<td>
<button class="">Ungroup</button>
</td>
</tr>
</tbody>
</table>

For level 1,
<tbody data-ng-repeat="storedata in storeDataModel.storedata"
data-ng-switch on="dayDataCollapse[$index]">
For level 2, i.e. the second tr
<tr data-ng-switch-when="true">, in which you have the second level ng-repeat.
Check out the fiddle http://jsfiddle.net/Pixic/VGgbq/ for nested accordion like table.

angularjs table : tr with category using ng-repeat with list

Given the following model :
[{categoryName: "category1", items:[{name:"item1.1"}{name:"item1.2"},...]},
{categoryName: "category2", items:[{name:"item2.1"},...]},...]
I'd like to create this table :
<table>
<tr>
<th>category1</th>
</tr>
<tr>
<td>item1.1</td>
</tr>
<tr>
<td>item1.2</td>
</tr>
...
<tr>
<th>category2</th>
</tr>
<tr>
<td>item2.1</td>
</tr>
...
</table>
How would you do it using angularjs instructions ?

Nested repeats and the new ng-repeat-start/ng-repeat-end and remembering that it is OK for a <table> to have many bodies and heads:
<table>
<thead ng-repeat-start="x in data">
<tr><th>{{x.categoryName}}</th></tr>
</thead>
<tbody ng-repeat-end>
<tr ng-repeat="y in x.items">
<td>{{y.name}}</td>
</tr>
</tbody>
</table>
Relevant fiddle: http://jsfiddle.net/kGZt8/
Documentation: ngRepeat