We Keep Coding

Dynamically lock tr at bottom of table

is there some way to lock a tr at the end of a table with VUE or Js?
I have a Vue-Component which adds tablerows dynamically based on an API call, but I need one specific tr to be at the bottom and if a new tr is added, it should be above the last one.
Not in the tfoot because there is some other nformation
Here is the Vue-Component
<tbody>
<tr is="deliverytable"
v-for="delivery in deliveries"
v-bind:key="delivery.id"
v-bind:delivery="delivery"></tr>
</tbody>
Template of the Vue-Component
<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
<td>
<div v-if="delivery.is_printable">
<input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
</div>
</td>
<td>[[ delivery.dispatched ]] Uhr</td>
<td>[[ delivery.action ]]</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
<div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
<div v-else-if="delivery.event != 0" #change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
</td>
<td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
<td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
<td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
<td>
<a v-if="delivery.is_deletable" type="button" #click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
</td>
</tr>

If your components iterated over in a loop you can render this specific after loop above
<table>
<thead>
some headers
</thead>
<tbody>
<tr v-for="(rowItem, key, index) in dataTable" :key="index">
your API call items
</tr>
<tr>
your specific item
</tr>
</tbody>
</table>

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}

This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

How to use expressions inside ng-click and ng-show

I am trying to make a expandable rows to the table. I do not get any error messages but it is not working as expected. I suspect there is something wrong how I am using expressions with ng-show here?
plunker
my code:
<table class='table'>
<thead>
<tr>
<th>name</th>
<th>itemOne</th>
<th>itemTwo</th>
</tr>
</thead>
<tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
<tr>
<td>
<button ng-show="data.expand" ng-click='data.expand = true'>+</button>
<button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
<input type="checkbox" class='checkbox'>
<a rel="noopener" target="_blank" href={{data.url}}>
{{data.name}}
</a>
</td>
<td>{{data.valueMain}}</td>
<td>{{data.tValue}}</td>
<tr>
<tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
<td>
{{subs.name}}
</td>
<td>
{{subs.valueSub}}
</td>
<td>
{{subs.tValue}}
</td>
</tr>
</tr>
</tr>
</tbody>
</table>

Try this out
<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>
updated plunker
https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview

Get index of row in table using angularJS

I want to get index of each row in this table using angularJS
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>
I want to have a variable that contains the index of each row not to just display it

you can use $index
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
</tr>

I think you should be using the <tr> tag to place your ng-repeat directive.
You can use ng-repeat's $index property. See ng-repeat's documentation.
<table>
<tbody>
<tr ng-repeat = "cust in costomers">
<td> {{$index}} </td>
<td> {{cust.name}} </td>
<td> {{cust.phone}} </td>
<td> {{cust.address}} </td>
</tr>
</tbody>
</table>

$index works fine when the ng-repeat is not filtered. If you use a filter, it might be better to use indexOf(). Example:
<input type="text" ng-model="filterCustomers" placeholder="search...">
<table>
<tbody>
<tr ng-repeat = "cust in costomers | filter:filterCustomers">
<td> {{costomers.indexOf(cust) + 1}} </td>
</tr>
</tbody>
</table>

If you want to use your own variable as index you can use this:
<table>
<tbody>
<tr ng-repeat = "(index, cust) in costomers">
<td> {{index}} </td>
<td> cust.name </td>
<td> cust.phone </td>
<td> cust.address </td>
</tr>
</tbody>

KnockoutOut JS - why are these values not binding correctly?

I have this knockout observable array and I am trying to bind some of its values to my view. Where I am having difficulties is because its nested. I am not sure what the correct data-bind syntax is.
This is my observable array data:
I want to bind advertiserName within advertiser.
This is my HTML
<table id="tblBrand">
<thead>
<tr>
<th>Brand Name</th>
<th>
<button data-bind='click: $root.addBrand'>Add Brand</button></th>
</tr>
</thead>
<tbody data-bind="foreach: brands">
<tr>
<td>
<input data-bind="value: brandName" readonly="true" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input data-bind="value: advertiser.advertiserName" />
</td>
<td>
<input data-bind="value: advertiser.advertiserRank" />
</td>
</tr>
</table>
<td>
Remove
</td>
</tr>
</tbody>
</table>
The way my binding works is I am looking within each brand. Each brand has an advertiser object and I want to drill into that. The second screenshot shows my syntax and what the page renders.

Because your advertiser is ko.observable you need to get its value with advertiser() if you are using it inside an expression:
<table>
<tr>
<td>
<input data-bind="value: advertiser().advertiserName" />
</td>
<td>
<input data-bind="value: advertiser().advertiserRank" />
</td>
</tr>
</table>
Or you can use the with binding:
<table data-bind="with: advertiser">
<tr>
<td>
<input data-bind="value: advertiserName" />
</td>
<td>
<input data-bind="value: advertiserRank" />
</td>
</tr>
</table>