I have an object that looks something like this:
{
item1: [element1, element2],
item2: [element1, element2],
item3: [element1, element2],
item4: [element1, element2]
}
What I'm trying to do is to print a table with each element of each array in a new row. This issue I'm having is how to get the contents without repeating an entire div or table with ng-repeat.
Example:
<table ng-repeat="(key, value) in accounts">
<tr ng-repeat="element in value">
<td>{{element}}</td>
</tr>
</table>
Which is giving me a new table for each key. I just one table with a row for each array element. Any way to do this with angular or do I need to use javascript?
It'd probably be easier to mash your elements into one array, then repeat over that array:
$scope.elements = Object.keys($scope.accounts).reduce(function(arr, key) {
return arr.concat($scope.accounts[key])
}, []);
And then the HTML:
<table>
<tr ng-repeat="element in elements">
<td>{{element}}</td>
</tr>
Related
I am trying to dynamically add a dropdown using $sce.trustAsHtml() function but I am getting an empty list in the UI. Here is the code:
$scope.addRowtrain = function() {
$scope.locomotivesList = [{"name": "loco1", "value":"1"}, {"name": "loco2", "value":"2"}];
tableData[id] = $sce.trustAsHtml('CTRun'+counter++);
tableData[type] = $sce.trustAsHtml("<select data-ng-model='selectedLoco' data-ng-options='loco.name for loco in locomotivesList'></select>");
}
In the HTML, I want to render it as a table:
<table>
<tbody>
<tr ng-repeat="data in tableData track by $index">
<td ng-repeat="(k, p) in data track by $index"><span ng-bind-html=p>{{p}}</span></td>
</tr>
</tbody>
<a class="btn btn-danger" ng-click="addRowtrain()">Add Run</a>
...
</table
but it is displaying an empty table, please help
you are adding it dynamically you must not pass binding values instead pass Complete JSON object.
It's working with
this example
md-select in angular material
I have a json and inside this json there is an array that I want to iterate in <td>.
My functionality is like I have to create a table based on user input. User provides input for number of rows, input columns and output columns. So I have three arrays i.e $rootScope.input_columns, $rootScope.output_columns and $rootScope.rows which contain data provided by user to create the table. Now in input_columns there's an array which contains some information which I need to show on row cell. But with my current code it is giving me blank row.
Controller:
var app = angular.module('rulesApp');
app.controller('myController2', ['$scope', '$rootScope',function($scope, $rootScope){
var inputcol=[];
$rootScope.input_col=$scope.no_of_input;
$rootScope.output_col=$scope.no_of_output;
$rootScope.rows=$scope.no_of_row;
for(var i=0;i<$rootScope.input_col;i++){
inputcol.push({
id: inputcol.length,
dropped: false,
dataType:'',
name:'',
type:'input',
path:'',
rowCellValue:[],
rowCellValueOutput:[]
});
}$rootScope.input_columns=inputcol;//here i get input_columns json, Similarly json are made for output_columns and rows
$scope.statementSelected = function(branch, selected_branches) {
if(branch.selected) {
for(var i = 0; i < $rootScope.input_columns.length; i++) {
//Here i add an array inside input_columns.rowCellValue $rootScope.input_columns[i].rowCellValue.push($rootScope.rows[i].rowCellValue);
}
})
Adding the structure of input_columns
This is my html code:
<tbody>
<tr ng-repeat="row in rows"><!--It iterates on row json -->
<td><input type="checkbox"></td>
<!--Here i want that in row cells input_columns.rowCellValue data gets populate on row cell for input column -->
<td ng-repeat="col in input_columns.rowCellValue">{{(col == "") && "<enter data>" || (col.split("/")[3])}}</td>
<!--Here i want that in row cells output_columns.rowCellValueOutput data gets populate on row cell for output column -->
<td ng-repeat="col in output_columns.rowCellValueOutput" ng-click="openDialog($event)">{{(col == "") && "<enter data>" || (col.split("/")[3])}}</td>
</tr>
</tbody>
I want to get a structure like this
But I am getting blank rows
Please can anyone help me in this task. Is there an issue that I haven't iterated input_columns so i am not getting input_columns.rowCellValue values. How can I get the values of input_columns.rowCellValue in table columns? Is there anyway that I can use two ng repeat, with first ng-repeat i can get input_column value[col in input_column] and with second ng-repeat i can get rowCellValue[cell in col.rowCellValue].?
I was trying some solution and figured out one way to access rowCellValue:
This is the modified html code
<tbody>
<tr ng-repeat="row in rows"><!--It iterates on row json -->
<td><input type="checkbox"></td>
<!--Here i want that in row cells input_columns.rowCellValue data gets populate on row cell for input column -->
<!--here with $index i am getting first value of rowCellValue in entire column can i iterate it with using rows length -->
<td ng-repeat="col in input_columns">{{(col.rowCellValue[$index] == "") && "<enter data>" || (col.rowCellValue[$index].split("/")[3])}}</td>
<!--Here i want that in row cells output_columns.rowCellValueOutput data gets populate on row cell for output column -->
<td ng-repeat="col in output_columns" ng-click="openDialog($event)">{{(col.rowCellValueOuput[$index] == "") && "<enter data>" || (col.rowCellValueOutput[$index].split("/")[3])}}</td>
</tr>
</tbody>
this the actual table I want for input_column:
But I am getting this:
Can i iterate col.rowCellValueOutput[$index] with row length instead of $index? and for each column. If yes, please suggest some approach for this.
Have you tried putting this into a JSON object and looping through the JSON. It looks like what you are trying to do is, everytime a new row is created, the inputCol and outputCol would be trying to output everything for every row.
//pseudo code
ng-repeat row in rows
ng-repeat input in inputs
ng-repeat output in outputs
Everytime you loop through rows, all of inputs and outputs data will be outputted again, making every row the same.
If you made a JSON object and done something like,
ng-repeat row in rows
ng-repeat input in row.input
ng-repeat output in row.output
Your JSON would look like
var rows = [{ input: [ "row1", "col2" ], output: [ "col3", "col4" ] },
{ input: [ "row2", "col2" ], output: [ "col3", "col4" ] }];
I found a solution for my problem:
<td ng-repeat="col in input_columns" title="" id="{{col}}">{{(col.rowCellValue[$parent.$index] == "") && "<enter data>" || (col.rowCellValue[$parent.$index].split("/")[3])}}</td>
In controller structure of json was like:
input_column({
rowCellValue[
0:dic2317/fdgdfg3535/accViolation
1:dic2317/sdg3436dg/driver
})
I used $parent.$index for iterating with rows index.
I have this data:
{
"order":[
{
"id":1,
"table":1,
"foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}",
"drinks":"{'drinks':[{'id':1,'name':'Teh O Ais','qty':1}]}",
"waiter":"ali",
"foods_status":0,
"drinks_status":0,
"created_at":"2015-07-12T00:30:52.637Z",
"updated_at":"2015-07-12T00:30:52.637Z"
},
{
"id":2,
"table":2,
"foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
"drinks":"{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]}",
"waiter":"abu",
"foods_status":0,
"drinks_status":0,
"created_at":"2015-07-12T00:51:43.552Z",
"updated_at":"2015-07-12T00:51:43.552Z"
}
]
}
I try to grab all foods name inside table like this:
<table class="table-bordered table table-striped">
<thead>
<tr>
<td>#</td>
<td>Name</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.foods.name}}</td>
<td>
<button class="btn btn-danger" ng-click="">Delete</button>
</td>
</tr>
</tbody>
</table>
And this is my $http.get to get the data:
$http.get("../api/orders")
.success(function(data) {
var order = data.order;
$scope.orders = order;
});
I managed to bind the id but I could't bind the name inside the foods array.
How to get the name inside the foods array of this data?
Plunker:
http://plnkr.co/edit/2oiOc06cZph4en8DJ18n
You need another ng-reapeat. Something like this:
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>
<span ng-repeat="item in order.foods.foods">{{item.name}}/</span>
</td>
<td>
<button class="btn btn-danger" ng-click="">Delete</button>
</td>
</tr>
Another consideration is about the format of your JSON. this line:
"foods":"{'foods':[{'id':2, 'name':'Nasi Minyak', 'qty':1}]}"
the way it is, "foods" is holding a String, and not a Object. To make the ng-reapeat work, you will need to force JSON from string using
JSON.parse(jsonString);
or change your JSON to:
"foods":{"foods":[{"id":2, "name":"Nasi Minyak", "qty":1}]}
Side note, why repeat the keys "foods" and "drinks"? Doesn't seem logic to me. Change your data structure to:
"order":[
{
"id":1,
"table":1,
"foods":[{"id":1, "name":"Nasi Kerabu", "qty":1},{"id":2, "name":"Nasi Minyak", "qty":1}],
"drinks":[{"id":1,"name":"Sirap Ais","qty":1},{"id":2, "name":"Milo Ais", "qty":1}],
"waiter":"ali",
"foods_status":0,
"drinks_status":0,
"created_at":"2015-07-12T00:30:52.637Z",
"updated_at":"2015-07-12T03:30:35.684Z"
},
...
]
and use:
<td> <span ng-repeat="item in order.foods">{{item.name}}</span> </td>
Here is a plunker with these modifications:
http://plnkr.co/edit/UVvCVzh4hbsEwolyWpDs?p=preview
Here is a plunker that works http://plnkr.co/edit/snE9Em0tCKh0nUHIlTFn?p=preview.
Consider modifying your JSON file. Use double quotation marks instead of single quotation marks.
In your modified JSON file in your new plunker remove double quotations marks here "[{'id':1,
I have made some changes in your data and it fix the issue you are facing.
Here is plunker link
`http://plnkr.co/edit/nxBGMMyuNIzUOvQAu7YY?p=preview`
Each order would be an object like this:
{
"id":2,
"table":2,
"foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
"drinks":"{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]}",
"waiter":"abu",
"foods_status":0,
"drinks_status":0,
"created_at":"2015-07-12T00:51:43.552Z",
"updated_at":"2015-07-12T00:51:43.552Z"
}
Note that foods points to an object, whose only key 'foods' points to an array... whose first component should be an object. However, if you read more closely:
"foods":"{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]}",
Notice the double quotes surrounding foods's value? They mean that it points to a String instead of an object.
First, you need to delete the double quotes surrounding the values of both foods and drinks:
"foods":{'foods':[{'id':2, 'name':'Nasi Goreng', 'qty':1}]},
"drinks":{'drinks':[{'id':1,'name':'Milo Ais','qty':1}]},
And then replace all the single quotes with double ones, to make the object comply with the JSON object definition:
"foods":{"foods":[{"id":2, "name":"Nasi Goreng", "qty":1}]},
"drinks":{"drinks":[{"id":1,"name":"Milo Ais","qty":1}]},
Now, to get 'name', you need to access order.foods.foods[0].name instead of order.foods.name.
I have a table using angularjs where I want to loop through an array to print specific headers from a json object. The header prints out fine, but the problem comes when I try to use a variable from my nested ng-repeat as a json selector. If you replace the inner ng-repeat with the commented section below it, it will work.
Table:
<table>
<thead>
<th ng-repeat="column in tableHeader">{{column}} <a ng-click="sort_by(column);"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered>
<td ng-repeat="column2 in tableHeader">{{data.column2}}</td>
<!-- <td>{{data.Environment}}</td>
<td>{{data.HostIP}}</td>
<td>{{data.ServiceName}}</td>
<td>{{data.Status}}</td>
<td>{{data.StartTime}}</td>
<td>{{data.Capacity}}</td>
<td>{{data.Txn}}</td>
<td>{{data.Errors}}</td>
<td>{{data.Build}}</td>
<td>{{data.Project}}</td>
<td>{{data.Author}}</td>
<td>{{data.ModifyDate}}</td>
<td>{{data.Port}}</td>
<td>{{data.BasePath}}</td> -->
</tr>
</tbody>
</table>
Array located in controller:
$scope.tableHeader = ['Environment', 'HostIP', 'Status', 'ServiceName', 'StartTime', 'Capacity', 'Txn', 'Errors', 'Build', 'Project', 'Author', 'ModifyDate', 'Port', 'BasePath'];
I think you're looking for {{data[column2]}}. Since column2 is just the string value of the property you want, treat data like an associative array in this case to get the property you're trying to display.
column2 was created by the ng-repeat and is what you want. Note {{column2}}:
<td ng-repeat="column2 in tableHeader">{{column2}}</td>
I am getting some data from an external service and I am trying to show it on a table. The problem is that the data I get from service will be with dynamic columns, some times there will be 5 column another time 8. I don't know how I could handle it in ng-repeat. and using things like ng-grid won't be a good solution I think as there will be only 10 rows to display. for this If I use any external solution that will be a overhead. Is there any angular method to achieve this? if not what is the best option for this small data.
Note: Column names will also be dynamic
My code
<div ng-app='myApp' ng-controller="MainCtrl">
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line #</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.itemId}}</td>
<td>
{{data.quantity}}
</td>
<td>{{data.packed}}</td>
</tr>
</tbody>
</table>
</div>
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.packageElement = [{
name: counter,
show: true,
Data: [{
name: 'item 1',
itemId: '284307',
quantity: '100',
packed: 0
}, {
name: 'item 2',
itemId: '284308',
quantity: '200',
packed: 0
}]
}];
});
Will there be the same number of columns for all data items? If so, I think you can do this.
1. Define a function on your scope that gives you the object keys:
$scope.keys = function(obj) {
var key;
var keys = [];
for (key in obj) {
if (key === "$$hashKey") break; //angular adds new keys to the object
if (obj.hasOwnProperty(key)) keys.push(key);
}
return keys;
}
2. use a repeater on the table header (if the objects can have different properties, you need to find the object with the highest number of properties/columns)
<th ng-repeat="key in keys( prdElement.Data[0] )">{{key}}</th>
3. use a repeater on the table cell
<td ng-repeat="key in keys( prdElement.Data[0] )">{{ data[key] }}</td>