I have a problem when trying to format a table created with two arrays using ng-repeat. I have the two arrays; game.Teams[0].Scores and game.Teams[1].Scores, and the following html:
<table>
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in game.Teams[0].Scores">
<td>
{{score.ExtraPoints}}
</td>
<td>
????
</td>
</tr>
</table>
I want to loop over both lists and fill the second column with items from the second list. Is this achievable with ng-repeat, or will I have to merge the two and loop over a combined list?
Assuming both teams have the same amount of items
<table ng-init="scores = game.Teams[0].Scores.length > game.Teams[1].Scores.length ? game.Teams[0].Scores : game.Teams[1].Scores">
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in scores">
<td>
{{game.Teams[0].Scores[$index].ExtraPoints}}
</td>
<td>
{{game.Teams[1].Scores[$index].ExtraPoints}}
</td>
</tr>
</table>
Note: you can do that ngInit part in the controller, just showing how it can be done all in the view.
Related
How the Way Start descending order Number Via {{1+ $index}}
Example 1,2,3,4, to 4,3,2,1
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">link</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in post.users | orderBy : '-id'">
<th>{{1+$index}}</th>
<td>
{{user.email}}
</td>
</tr>
</tbody>
to do this you can use java script reverse() function.store that reversed array in a array variable and iterate in your html file if you are using angular 2 or above.
I have example code below where I am supposed to create a list of items.
<div ng-hide="listTrigger">
<!--FIRST TABLE-->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="code" class="sortable">
Product Name
</th>
<th sortable="placed" class="sortable">
Qty
</th>
<th class="st-sort-disable th-dropdown">
Price
</th>
<th sortable='total.value' class="sortable">
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="40%">
<select class="form-control" ng-model="prod.uid">
<option selected disabled>Select Product</option>
<option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option>
</select>
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.qty" class="form-control">
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.price" class="form-control">
</td>
<td width="10%">
<input type="number" min="1" max="100" ng-model="prod.split" class="form-control">
</td>
<td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td>
</tr>
</tbody>
</table>
<!--SECOND TABLE-->
<table ng-show="newProducts.length!=0" class="table">
<thead>
<tr>
<th >
Product Name
</th>
<th >
Qty
</th>
<th >
Price
</th>
<th >
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="newProduct in newProducts">
<td width="60%" ng-bind="newProduct.uid"></td>
<td width="10%" ng-bind="newProduct.qty"></td>
<td width="10%"ng-bind="newProduct.price"></td>
<td width="10%" ng-bind="newProduct.split"></td>
<td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td>
</tr>
</tbody>
</table>
Output
but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list
In JS I am getting all details from input fields and settinf to an object prod and then pushing it in to an array newProducts.
Later in the table I am using ng-repeat to repeat items in newProducts array. The top table and bottom table are connected in no other way and I cannot figure out why values are chaging in bottom table when they are changed in input fields. Also while trying to add it one more time, it throws an error.
jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D
Here is the JS to add new item
//function to add new product while creating
$scope.addNewProduct= function(id){
$scope.newProducts.push($scope.prod);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
I tried console.log to log newProducts array in console, it is getting updated with new array , but not showing up in second table. Please help!
use angular copy.
angular $scopes are two way binded.. the changes u make in first table will be reflected in second table as you are pushing $scope.prod which is two way binded.
Using $scope can be very tricky. I'm not the best in Angular but i have no idea
$scope.newProducts.push($scope.prod);
if you are using here the $scope of the function or the $scope of the Controller.
Put in at the very top of your Controller "var vm=$scope", and in your html use "Controller as vm".
So if you are then there, we can see if the problem still exists.
Angular variables are reference type. So you can use angular.copy() to overcome from this issue. Below the code.
$scope.addNewProduct= function(id){
var products = angular.copy($scope.prod);
$scope.newProducts.push(products);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
Hope it will help you thanks.
I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.
I was trying to use ng-repeat to create a table, but I couldn't figure out how to get it to work. My best attempt was the below.
<table ng-repeat="j in [0,1,2,3,4,5,6,7]">
<tr>
<th>
Header {{j+1}}
</th>
</tr>
<tr ng-repeat="i in [0,1,2,3,4,5,6,7]">
<td>
{{i+1}} , {{j+1}}
</td>
</tr>
</table>
any ideas?
So to begin with, the ng-repeat attribute is on the table, meaning that you are repeating this element as many times as there are entries in your array. Knowing that "tr" stands for the rows, and "td" for different sections in your rows.
You could try:
<table>
<tr><!--this is your header row -->
<th>
Header {{j+1}}<!-- this is a header section, you can repeat here or use it as a title -->
</th>
</tr>
<tr ng-repeat="j in [0,1,2,3,4,5,6,7]"><!-- repeat the rows -->
<td ng-repeat="i in [0,1,2,3,4,5,6,7]"><!-- repeat the sections -->
{{i+1}} , {{j+1}}<!-- here you can display i, j whatever else -->
</td>
</tr>
</table>
After migrating to v1.10 sorting by hidden column stopped working.
Fiddler Example
v1.10
http://jsfiddle.net/0rstgd4f/
var dataTableInfo = $("#dataTable1").DataTable(
{
"initComplete": function(settings, json)
{
settings.aoColumns[0].iDataSort = 1;
}
});
<table id="dataTable1">
<thead>
<tr>
<th>
Column1
</th>
<th style="display:none;">
Column2
</th>
<th>
Column3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td style="display:none;">
1
</td>
<td>
a
</td>
</tr>
<tr>
<td>
2
</td>
<td style="display:none;">
2
</td>
<td>
b
</td>
</tr>
<tr>
<td>
3
</td>
<td style="display:none;">
1
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
v.1.8.2
http://jsfiddle.net/rzzrbwb0/
Columns should be sorted as:
1
3
2
or
2
1
3
I tried to use new definition for initComplete as columns(), column() and so on but it did not work.
Any ideas and suggestions are welcome.
I don't think initComlete is the correct place to change DataTables behavior, at least for 1.10. From the manual:
DataTables stores the configuration and data for each table in a
settings object. The structure of this object is considered to be
private in terms of the DataTables API and reading or writing to the
values in the object is not supported. The property names and values
contained within the object can, will and do change between versions!
If you're using DataTables 1.10, it should be defined using columns.orderData or columnDefs.orderData, see the example below:
var dataTableInfo = $("#dataTable1").DataTable({
"columnDefs": [
{ "orderData": 1, "targets": [ 0 ] }
]
});
See this JSFiddle for demonstration.