We Keep Coding

How to remove default order of ng-repeat

How do I stop default sorting inside the ng-repeat for dynamic table data ?
Currently I am getting below order:
Addr | CustomerId | Name
but what I want is below ordering:
CustomerId | Name | Addr
Any Help would me much appreciated.
JS:
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Addr:'India'
},
{
CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
},
{
CustomerId: 3, Name: "Suzanne Mathews", Addr:'India'
},
{
CustomerId: 4, Name: "Robert Schidner", Addr: 'India'
}
];
});
HTML:
<table>
<tr >
<th ng-repeat="(key,value) in Customers[0]">{{key}}</th>
</tr>
<tbody ng-repeat="c in Customers">
<tr>
</tr>
</tbody>
</table>

Try this below way. I hope this below snippet result is showing what you want.
angular.module("aaa",[]).controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Addr:'India'
},
{
CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
},
{
CustomerId: 3, Name: "Suzanne Mathews", Addr:'India'
},
{
CustomerId: 4, Name: "Robert Schidner", Addr: 'India'
}
];
$scope.keys = Object.keys($scope.Customers[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="MyController">
<table>
<tr>
<th ng-repeat="key in keys">
{{key}}
</th>
</tr>
<tbody ng-repeat="c in Customers">
<tr>
<td ng-repeat="key in keys">{{c[key]}}</td>
</tr>
</tbody>
</table>
</div>

So objects in JS are inherently unordered. What you can do is just hard code the keys in the header if that will be fixed for that particular table and then print the values in the respective order.
Something like this:
<table>
<tr >
<th>CustomerId</th>
<th>Name</th>
<th>Addr</th>
</tr>
<tbody>
<tr ng-repeat="c in Customers">
<td>{{CustomerId}}</td>
<td>{{Name}}</td>
<td>{{c.Addr}}</td>
</tr>
</tbody>
</table>
Note: I put the ng-repeat on the tr which is probably what you need. I dont think you should put it on the tbody.

Do you mean the sort order of the data or the display order of the columns?
The accepted answer displays the data by the order of the columns as specified, but if you want the data itself sorted then just add a filter to the data like this:
<tbody ng-repeat="c in Customers|orderBy:['CustomerId','Name','Addr']">
This sorts the actual data in the list by the fields specified.

Ember datatables not able to redraw after changing data

I am using ember-datatables addon which is based on jquery Datatables. I have created one datatables as per their guidelines.
But I am chaning the data of table after some time and redrawing the table. Redrawing table do not delete previous data.
Here is Ember twiddle created by me. Also I am adding code below.
templates/application.hbs
<h1>Please find data table below</h1>
{{outlet}}
{{#data-table id="myTable"}}
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Position</th>
</tr>
</tfoot>
<tbody>
{{#each data1 as |data|}}
<tr>
<td>{{data.name}}</td>
<td>{{data.salary}}</td>
<td>{{data.position}}</td>
</tr>
{{/each}}
</tbody>
{{/data-table}}
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function() {
Ember.run.later(this, function() {
this.controller.set('data1', [{
'name': 'John Smith 1',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Alex 1',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Leonardo 1',
'salary': '$2000',
'position': 'developer'
}]);
var api = new $.fn.dataTable.Api('#myTable');
api.row.clear();
api.draw();
}, 5000);
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
data1: [{
'name': 'John Smith',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Alex',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Leonardo',
'salary': '$2000',
'position': 'developer'
}]
});

You are getting TypeError: api.row.clear is not a function.
Changing from api.row.clear() to api.clear() is fixing your issue.
Consider avoiding this addon like mentioned in comments.

different table rows per data in ng-repeat Angular

Okay, so I'm having hard time understanding how ng-repeat builds tables. What I'm trying to do is that per row, there is customer name and address. I can't get it to work. Here is my HTML code:
<table class="table table-striped" ng-controller="myController">
<thead>
<tr>
<th>Company Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in fieldData" row-id="{{ company.name }}">
<td>{{ company.name }}</td><td>{{ company.address }}</td>
</tr>
</tbody>
</table>
and here is my script:
var companyName = [];
var companyAddress = [];
$scope.fieldData = [];
$(data).find('record').each(function () {
companyName.push($(this).record(6));
companyAddress.push($(this).record(47));
});
$scope.fieldData.push({
name: companyName,
address: companyAddress
})
So, in companyName and companyAddress arrays, there are name and addresses being stored. But I can't get one company & address per row. Any ideas?

You built an one element array with one object of two arrays, like:
fieldData: [
{
name: [
'name1', 'name2', 'etc'
],
address: [
'addr1', 'addr2', 'etc'
]
}
]
You want to have an array of objects with name and address fields:
fieldData: [
{
name: 'name1',
address: 'addr1'
},
{
name: 'name2',
address: 'addr2'
},
{
name: 'etc',
address: 'etc'
}
]
To achieve that, go with:
$scope.fieldData = [];
$(data).find('record').each(function (item) {
$scope.fieldData.push({
name: item.record(6),
address: item.record(47)
});
});

AngularJS: How to make this table with Ng-repeat?

Please, how can we make the table below with ng-repeat? I do not have permission to change the json structure, so I have to use exactly this way.
My json:
$scope.carCollection = {
'Toyota': [
{
'model': 'Corolla',
'price': '20.000,00',
'tag': ['a', 'b']
},{
'name': 'Hilux',
'price': '31.000,00',
'tag': ['b', 'c']
}
],
'Honda': [
{
'model': 'Civic',
'price': '18.000,00',
'tag': ['c']
}
]
};
And this is the html table:
<table>
<tr>
<td>Producer</td>
<td>Model</td>
<td>Price</td>
<td>Tags</td>
</tr>
<tr>
<td>Toyota</td>
<td>Corolla</td>
<td>20.000,00</td>
<td>a b</td>
</tr>
<tr>
<td>Toyota</td>
<td>Hilux</td>
<td>31.000,00</td>
<td>b c</td>
</tr>
<tr>
<td>Honda</td>
<td>Civic</td>
<td>18.000,00</td>
<td>c</td>
</tr>
</table>
Thanks!!!

You can find the ng-repeat documentation
https://docs.angularjs.org/api/ng/directive/ngRepeat
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
<div ng-controller="ExampleController">
<table class="friend">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>

You can format your data into your controller before render it in your view. Moreover, in my example you will see the :: bindings.
This is the one-time binding, it will stop recalculating the expression once they are stable, so you can improve your page loading by reducing numbers of watchers.
Controller
(function(){
function Controller($scope) {
$scope.carCollection = {
'Toyota': [
{
'model': 'Corolla',
'price': '20.000,00',
'tag': ['a', 'b']
},{
'model': 'Hilux',
'price': '31.000,00',
'tag': ['b', 'c']
}
],
'Honda': [
{
'model': 'Civic',
'price': '18.000,00',
'tag': ['c']
}
]
};
//To format our data
function format(data){
//Return a flatten array
return [].concat.apply([], Object.keys(data).map(function(key){
//Map our data object
return data[key].map(function(elm){
//Add brand property with the current key
elm.brand = key;
//Join tag array value
elm.tag = elm.tag.join(' ');
return elm;
});
}));
}
//Apply our format function
$scope.carCollection = format($scope.carCollection);
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
Then, you will get a flat array, so you just can iterate over it.
HTML
<body ng-app='app' ng-controller='ctrl'>
<table>
<tr>
<td>Producer</td>
<td>Model</td>
<td>Price</td>
<td>Tags</td>
</tr>
<tr ng-repeat="item in ::carCollection">
<td>{{::item.brand}}</td>
<td>{{::item.model}}</td>
<td>{{::item.price}}</td>
<td>{{::item.tag}}</td>
</tr>
</table>
</body>
You can see the Working Plunker

knockout.js nested foreach referencing each other

I'm trying to fill in the rows and cells of my table like the following:
<tbody data-bind="foreach: {data: rows, as: 'row'}">
<tr data-bind="foreach: {data: row, as: 'cell'}">
<td data-bind="text: cell"></td>
</tr>
</tbody>
with this as my rows var:
self.rows = ko.observableArray([
[
['Test', '10', '100', '98', '10', '15']
],
[
['Test2', '10', '100', '98', '10', '20']
]
]);
This fills in the correct number of rows, but only the first TD is populated with the entire contents of the array.
results in:
<tbody data-bind="foreach: {data: rows, as: 'row'}">
<tr data-bind="foreach: {data: row, as: 'cell'}">
<td data-bind="text: cell">Test,10,100,98,10,15</td>
</tr>
<tr data-bind="foreach: {data: row, as: 'cell'}">
<td data-bind="text: cell">Test2,10,100,98,10,20</td>
</tr>
</tbody>
What am I doing wrong?

You have three levels of arrays and you're only iterating two levels deep. If you change your rows data to nest only two levels deep, it should work as expected:
self.rows = ko.observableArray([
[
'Test', '10', '100', '98', '10', '15'
],
[
'Test2', '10', '100', '98', '10', '20'
]
]);
JSFiddle: http://jsfiddle.net/Zj2qN/

You have a 3rd level array. Are you sure you need that?
If so you to need nest one more foreach binding.
I dont think so, I think you want your array look this way:
self.rows = ko.observableArray([[1,2,3],[4,5,6]]);