angularjs - update table column when model changes - javascript

i have a dataTable that i define dynamically, based on my controller's model, as following:
<tbody>
<tr ng-repeat="rec in grid.records">
<td ng-repeat="col in grid.columns"
ng-init="value=rec[col.name]">
<span ng-model="rec[col.name]">{{value}}</span>
</td>
</tr>
</tbody>
why doesn't dataTable column values is updated when model changes?

Try this:
<tbody>
<tr ng-repeat="rec in grid.records">
<td ng-repeat="col in grid.columns">
<span>{{rec[col.name]}}</span>
</td>
</tr>
</tbody>

Related

How to add a td with colspan in angularjs for each iteration?

I'm trying to do this in angular:
<tr (each)>
<td>{{attribute1}}</td>
<td>{{attribute2}}</td>
<td>{{attribute3}}</td>
</tr>
But I need a wide TD after each TR with colspan 3 like:
<tr>
<td colspan="3">Another content for row 1</td>
</tr>
As you can see, the (angular each) is inside the <tr>, for my understanding, there's no way to put the colspan row...
Can you help?
Something simple like this for Angular 1:
<tr ng-repeat-start="item in items">
<td>{{item.attribute1}}</td>
<td>{{item.attribute2}}</td>
<td>{{item.attribute3}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="3">Another content for row 1</td>
</tr>
here are the docs
https://docs.angularjs.org/api/ng/directive/ngRepeat
Otherwise you need to do something like this for Angular 2
<template *ngFor let-item [ngForOf]="items">
<tr>
<td>{{item.attribute1}}</td>
<td>{{item.attribute2}}</td>
<td>{{item.attribute3}}</td>
</tr>
<tr>
<td colspan="3">Another content for row 1</td>
</tr>
</template>

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 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>

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>

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