Get index of row in table using angularJS - javascript

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>

Related

Edit/Print <input> field via Console

Here is what I have. Nothing has IDs, Names or Classes.
Is there anyway to enter a vaue in the input field under City using the Chrome Console and js? Alternatively is there a way I can print the value of said field also using js in the Chrome Console?
I assume it requires using the div City and traversing to next input.
Thanks ahead of time!
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Address</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>City</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Zipcode</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
document.getElementsByTagName("table")[3].getElementsByTagName("input")[0].value="your value"
The boilerplate code
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
try {
var field = document.getElementsByTagName("table")[i].getElementsByTagName("div")[0].textContent;
if (field == "City") {
document.getElementsByTagName("table")[i + 1].getElementsByTagName("input")[0].value = "your values"
}
} catch (err) {}
}

using ng-repeat-start and ng-repeat-end with 2 different objects

I'm trying to use 2 different objects for ng-repeat-start and ng-repeat-end.
for example:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end="otherFile in otherFiles">
<td colspan="2">
{{otherFile.errors}}
</td>
</tr>
Doesn't seem to work right now and it only assumes the first object (files)
Maybe this would do:
<tr ng-repeat-start="file in files">
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="2">
{{otherFiles[ $index ].errors}}
</td>
</tr>
Your problem is that ng-repeat-end does not accept an argument.
If you want to ng-repeat over a different object like you have above, you would need to start a new ng-repeat block.
Edit: Added wrapping html to show a point. You might want to change things around a bit.
<div ng-repeat="file in files track by $index">
<tr>
<td class="name-col">{{file.name}}<br>
</td>
<td class="name-col">{{file.progress}}</td>
</tr>
<tr>
<td colspan="2">
{{otherFile[$index].errors}}
</td>
</tr>
</div>

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

Angular repeat in tables

I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working.
https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}>
</td>
<td ng-repeat="type in informationValues1">{{type}}>
</td>
<td ng-repeat="type in informationNameValues2">{{type}}>
</td>
</tr>
</table>
I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+.
Angular ng-repeat in table
you could place each repeat into a different row so your code would look like:
<table>
<tr>
<td ng-repeat="type in informationNames">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationValues1">{{type}}
</td>
</tr>
<tr>
<td ng-repeat="type in informationNameValues2">{{type}}
</td>
</tr>
</table>
this way they are all listed veritally
if you want them horizontally and you know all of the list are the same length you can do it like this:
`
<table>
<tr ng-repeat="name in informationNames">
<td>{{name}}
</td>
<td>
{{informationValues1[$index]}}
</td>
<td>
{{informationNameValues2[$index]}}
</td>
</tr>
</table>

How to prepend html text for a selected element in ckeditor 4

I am using CKEditor 4.3.3, Where i have added table .Now table structure looks like given below
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Now i am able to select table using javascript as
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent();
Now i want to add html text before <tbody> start and after <table> start .
CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().appendHtml("<!-- <div>" +html+"</div> -->");
I am using this to append HTML. But for prepending HTML i am not able to find any API
Is there any alternatives?
I want output to be like this
<table>
<!-- <div>testing</div> -->
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table>
you can use any jquery functions by
var html=CKEDITOR.instances.ficeditor.getSelection().getStartElement().getParent().getParent().getParent();
$(html.$).prepend("hi");
You can use this
var editor = CKEDITOR.instances.ficeditor;
var data = $("<div>"+editor.getData()+"</div>");
data.prepend("top line");
editor.setData(data.html());

Categories