Dropdown Rows with AngularJS - javascript

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.

Related

Get <tr> items form a Table

I Have this table:
<table class="table table-hover">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Type</th>
<th>Phone</th>
<th>S.N.</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer" onclick="mandaDetalle(this.id)">
<td>PE-6</td>
<td>John Smith</td>
<td>GT5</td>
<td>845254585</td>
<td>56456456456</td>
<td>14/07/2017</td>
</tr>
</tbody>
</table>
How Can I send onclick that <tr> element with the items into a javascript (or jquery) function, I already sending the id of that one <tr> but I need to send the items as well, because I need to manipulate them, I need to store each <th> into a variable, so I can use them later.
you can do it like this:
(1) Add an id attribute to your row
(2) Attach an onclick event listener to the row found by the id set previously
(3) Look at the event.target to get the clicked table cell
(Simplified) HTML:
<table>
<tr id="row">
<td>
first cell
</td>
<td>
second cell
</td>
</tr>
</table>
JavaScript
function onRowClick(event) {
console.log(event.target);
}
document.getElementById('row').addEventListener('click', onRowClick);
Here's the JSFiddle for a demo. (make sure to open your web console)

Make last row NON sortable

I'm have sortable table rows in my angular project, but sorting rows also contains query-ui code elements and now i wan't to make last row NON sortable.
HTML
<div ng:controller="controller">
<table style="width:auto;" class="table table-bordered">
<thead>
<tr>
<th>Index</th>
<th>Count</th>
</tr>
</thead>
<tbody ui:sortable ng:model="list">
<tr ng:repeat="item in list" class="item" style="cursor: move;">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
<tr>
<td>Non Sortable</td>
<td>Non Sortable</td>
</tr>
</tbody>{{list}}
<hr>
</div>
controller
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "thre", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);
Here is working JsFiddle: http://jsfiddle.net/valor_/fc7oftkn/
So how to make last row non sortable? If you need any additional information's please let me know and i will provide. Thank you in advance
Just move them to the <tfoot> like below.
<table style="width:auto;" class="table table-bordered">
<thead>
<tr>
<th>Index</th>
<th>Count</th>
</tr>
</thead>
<tbody ui:sortable ng:model="list">
<tr ng:repeat="item in list" class="item" style="cursor: move;">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>{{list}}
<tfoot>
<tr>
<td>Non Sortable</td>
<td>Non Sortable</td>
</tr>
</tfoot>
</table>

How can I use ng-repeat in a table body to encompass multiple rows?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?
You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>
https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>

smart-table ng-repeat not rendering dynamic columns properly

html
<table st-table="ApplicationData.displayedCollection" class="table table-striped" st-safe-src="ApplicationData.source">
<thead>
<tr ng-repeat="col in ApplicationData.columns">
<td st-sort="{{col.name}}">{{col.caption}}</td>
</tr>
</thead>
js
$scope.ApplicationData = {
source: [],
displayedCollection: [],
columns: [{ name: 'APPLICATION_CODE', caption: 'Code', isSort: true },
{ name: 'APPLICATION_NAME', caption: 'Application', isSort: true }],
};
output
<table st-table="ApplicationData.displayedCollection" class="table table-striped" st-safe-src="ApplicationData.source">
<thead>
<tr ng-repeat="col in ApplicationData.columns" class="ng-scope">
<td class="ng-binding">Code</td></tr>
<tr ng-repeat="col in ApplicationData.columns" class="ng-scope">
<td class="ng-binding">Application</td></tr>
</thead>
</table>
Hi, I am using this html to generate columns dynamically but wvery time I try I am getting dynamically generated rows instead. please review my enclosed code and let me know the issue.
just need to edit the template slightly: move the ng-repeat out of the <tr> and into <td>
change this:
<thead>
<tr ng-repeat="col in ApplicationData.columns">
<td st-sort="{{col.name}}">{{col.caption}}</td>
</tr>
</thead>
to, for example, this:
<thead>
<tr>
<td ng-repeat="col in ApplicationData.columns">{{col.caption}}</td>
</tr>
</thead>
here's a jsfiddle with this code: https://jsfiddle.net/86y3yxmk/1/
additionally, this is a good read for what you might be trying to accomplish: https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat
GL!

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

Categories