I'm using AngularJS to display some data on a table, for that I'm making use of ng-repeat which takes an object and displays the values of the properties of it in the table cells.
The object structure is like this:
{
...
...
"containerKey" : {
"parentKey" : {
"childKey1" : "value",
"childKey2" : "value",
"childKey3" : "value
}
}
}
The ng-repeat shows a table
<table ng-repeat="key in containerKey">
<tr>
<!-- This should display the value of the key (in my case it is the name of a day in the week, but it displayed the entire object inside key.parentKey, which is expected -->
<th id="day">{{ key.parentKey }}</th> <!-- I would like for this to show the value of the key, in my case that would be the name of the day, like "monday" -->
</tr>
<tr>
<td>{{ parentKey.childKey1 }}</td>
</tr>
<tr>
<td>{{ parentKey.childKey2 }}</td>
</tr>
<tr>
<td>{{ parentKey.childKey3 }}</td>
</tr>
</table>
How would I go about showing only the key value of the parentKey in the table cell? Consider that I'm using ng-repeat to show multiple rows and each of this rows contain the ng-repeat that contains the days (parentKey).
To clarify:
I would like the <th> element with id="day" to show the text of the parentKey key. The th element's content would be parentKey (the string parentKey), literally, instead of the value of parentKey.
Have you tried altering your ng-repeat to use the object notation:
<table ng-repeat="(key, value) in containerKey">
You should have access to the key then.
Firstly, in your code you are trying to use ng-repeat over an object. ng-repeat should iterate over arrays.
Considerating containerKey is an array of parentKey, this may works:
<table>
<tbody ng-repeat="(key, value) in containerKey">
<th>{{key}}</th>
<tr>{{value.childKey1}}</tr>
<tr>{{value.childKey2}}</tr>
<tr>{{value.childKey3}}</tr>
</tbody>
</table>
Related
In my fees-list.component.html template, I have something like the following:
<div class="container">
<div class="row" *ngFor="let meta of fees">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Amount owing (AUD)</th>
<th>Fee type</th>
<th>Title</th>
<th>Amount to pay (AUD)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let fee of meta.fee">
<td>{{ fee.balance }}</td>
<td>{{ fee.type.desc }}</td>
<td>{{ fee.title }}</td>
<td><input id="{{ fee.id }}" type="text" name="toPay" value="{{ fee.balance }}"></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-4"><strong>Total to pay: </strong><input type="text" name="total" value="{{ meta.total_sum }}"> </div>
</div>
</div>
</div>
The requirement for my interface is twofold. If users change the value of an individual fee (fee.balance), the value in the total text input field should be updated.
Secondly, if the total input field is updated, I need to update the value(s) in the individual fees accordingly (reducing those by the appropriate amount from oldest fee to newest fee).
My question is, how do I do binding for these input fields which are dynamically generated, though they do have unique ids (id="{{ fee.id }})? I cannot work out how to target an individual fee field in my typescript file.
Use two way binding with ngModel
<input [name]="fee.id" type="text" [(ngModel)]="fee.balance">
Now when the user types in the textbox it will update the value in the array directly.
Also you should not be using {{}} binding on your attributes like that, use attribute binding with the [box] syntax.
<input type="text" name="total" [value]="total_sum">
You can calculate the total in your TypeScript like
get total_sum() {
return meta.fees.reduce((total, fee) => total + fee.balance, 0);
}
One approach ( preferred) is to create the controls dynamically.
your typescript file :
constructor(){
this.formGroup = new FormGroup();
const controls = meta.fee.map((fee)=>{
this.formGroup.addControl(fee.id, new FormControl(fee.balance))
});
// now you have a formGroup with all the controls and their value are initialized, you just need to use it in your template
}
your template :
<tbody>
<tr *ngFor="let fee of meta.fee">
<td>{{ fee.balance }}</td>
<td>{{ fee.type.desc }}</td>
<td>{{ fee.title }}</td>
<td><input id="{{ fee.id }}" [formControl]="formGroup.get(fee.id)" type="text" name="toPay"></td>
</tr>
</tbody>
So obviously, after this, you have the full power to do anything, for example, if you want to update a specific one of them:
updateValue(){
this.formGroup.get('oneOfThoseFeeIds').setValue('new value')
}
NOTE :
I haven't done Angular for a while and don't remember the exact syntaxes, but I hope this gives you a path
Can't you just use a service for that? I guess this is a way to go here, since you should try keeping your components as small as possible and communicate them by services.
Please, have a look at this chapter in angular documentation: https://angular.io/tutorial/toh-pt4
I am completely new to angular, I need to create a table. The data array is as-follows:-
data = [{rollno: 1,name: 'abc',subject: 'maths'},
{rollno: 4,name: 'xyz',subject: 'history'},
{rollno: 2,name: 'pqr',subject: 'history'}
];
I want to create a table with some summary rows based on this data and then when I click the expand button the sub-rows should appear beneath that summary-row indicating the actual data.
For example:-
Expand/Collapse | No of Students | Subject
click here 1 Maths
click here 2 History
When I toggle the expand/collapse button on the second row for example I want actual rows to appear like this beneath it:-
Expand/Collapse | No of Students | Subject
click here 1 Maths
click here 2 History
RollNo | StudentName
4 xyz
2 pqr
How Can I achieve this?
1) Grouping the data by subject
First you need to group the data by subject and then count the items in each group.
You can use the angular.filter module's groupBy filter to do this.
1a) Add a dependency on that module as follows:
var app = angular.module("yourModuleName", ["angular.filter"]);
1b) You can then use the groupBy filter in an ng-repeat directive on a <tbody> tag like this:
<tbody ng-repeat="(key, value) in data | groupBy: 'subject'">
1c) You're now dealing with the data in the format below. This is an object of key/value pairs where "maths" and "history" are both keys, and the arrays are the values
{
"maths": [
{
"rollno": 1,
"name": "abc",
"subject": "maths",
}
],
"history": [
{
"rollno": 4,
"name": "xyz",
"subject": "history",
},
{
"rollno": 2,
"name": "pqr",
"subject": "history",
}
]
}
2) Displaying the grouped data and counting the items in each group
Use key and value to display the grouped data in a table as follows:
<table>
<thead>
<tr>
<th>Subject</th>
<th>Number of Students</th>
<th>Expand/Collapse</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in data | groupBy: 'subject'">
<tr>
<td>{{ key }}</td>
<td>{{ value.length }}</td>
<td>
<button>
Expand/Collapse
</button>
</td>
</tr>
<tr>
<td colspan="3">
<table>
<thead>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in value">
<td>{{ student.rollno }}</td>
<td>{{ student.name }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Note the extra <tr> and nested table with another ng-repeat for displaying the student data. Currently all nested student data will display, the next step is to conditionally show/hide the nested tables based on which expand/collapse button was clicked.
3) Showing/Hiding the nested student data
3a) Add an ng-click directive on the button so that it passes in the key to an onExpandClicked function on your controller:
<button ng-click="onExpandClicked(key)">
Expand/Collapse
</button>
3b) Create the onExpandClicked function in your controller:
$scope.onExpandClicked = function(name){
$scope.expanded = ($scope.expanded !== name) ? name : "";
}
This sets a value on the $scope that can be used in the view to decide whether to show/hide a section of student data. The key is passed into the function as the name parameter and $scope.expanded will either be set to name or reset to "" depending on whether the passed in name is the same as the current $scope.expanded value or not.
3c) Finally, use the $scope.expanded variable in an ng-if directive on the second <tr> tag of <tbody> to show or hide the nested student data:
<table>
<thead>
<tr>
<!-- Omitted for brevity -->
</tr>
</thead>
<tbody ng-repeat="(key, value) in data | groupBy: 'subject'">
<tr>
<!-- Omitted for brevity -->
</tr>
<tr ng-if="expanded === key">
<!--
Omitted for brevity
-->
</tr>
</tbody>
</table>
Demo
CodePen: How to show/hide grouped data created by the angular.filter module's groupBy filter
Design a table with html and iterate through your data object with ng-repeat loop to display the data.
ngRepeat
W3Schools has some basic examples on how to display tables with AngularJS
Angular Tables
First you should replace the actual table by a div structure, because it is not possible to mix two kinds of table like you are planning (when I get you right).
You could toggle every row with a ng-click with the corresponding expanded content like this (pseudo code, I hope the idea gets clear):
<div class="row-header">
<span>RollNo</span>
<span>StudentName</span>
</div>
<div class="row-content" ng-if="!row_4_expanded" ng-click="row_4_expanded = !row_4_expanded">
<span>4</span>
<span>xyz</span>
</div>
<div ng-if="row_4_expanded">
<div class="row-expanded-header">
<span>No of Students</span>
<span>Subject</span>
</div>
<div class="row-expanded-content">
<span>1</span>
<span>Math</span>
</div>
<div class="row-expanded-content">
<span>2</span>
<span>History</span>
</div>
</div>
<div class="row-content" ng-if="!row_2_expanded" ng-if="row_2_expanded" ng-click="row_2_expanded = !row_2_expanded">
<span>2</span>
<span>pqr</span>
</div>
<div ng-if="row_2_expanded">
<div class="row-expanded-header">
<span>No of Students</span>
<span>Subject</span>
</div>
<div class="row-expanded-content">
<span>1</span>
<span>Math</span>
</div>
<div class="row-expanded-content">
<span>2</span>
<span>History</span>
</div>
</div>
When you now click on a row, it toggle presens with the corresponding expanded one.
Here is a working example which resolves your problem.
var indexCtrl = ['$scope', function($scope){
$scope.num = 0;
$scope.test = [{rollno: 1,name: 'abc',subject: 'maths'},
{rollno: 4,name: 'xyz',subject: 'history'},
{rollno: 2,name: 'pqr',subject: 'history'}
];
$scope.changeShow = function(index){
$scope.num = index;
};
}];
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller='indexCtrl'>
<table>
<tr>
<td>Expand/Collapse</td>
<td>No of Students</td>
<td>Subject</td>
</tr>
<tr ng-repeat='i in test' ng-class="num == $index ? red : none">{{}}
<td ng-click='changeShow($index)'>click here</td>
<td>{{$index +1}}</td>
<td >{{i.subject}}</td>
</tr>
</table>
<table>
<tr>
<td>RollNo</td>
<td>StudentName</td>
</tr>
<tr ng-repeat='i in test'>
<td ng-show='num == $index'>{{i.rollno}}</td>
<td ng-show='num == $index'>{{i.name}}</td>
</tr>
</table>
<style>
table tr td{
border: 1px solid black
}
</style>
</body>
</html>
Hope it helps you.
I am currently facing an issue whereby I would like to generate a dynamic number of input forms and also name them dynamically (as defined by a JSON) so that I can reference them separately.
For example, if my JSON object had three items in it, I would generate three input boxes with ng-model="1", ng-model="2" and ng-model="3" respectively. In real life the ID's will come from the JSON itself.
I'm currently using ng-repeat to generate the forms in a table;
<tr ng-repeat="x in names track by $index">
<td>{{ $index }}</td> <!-- this outputs fine -->
<td>{{ x.Description }}</td>
<td>{{ x.Metric }}</td>
</tr>
And using a directive & the $compile function to dynamically generate an input form with a unique ng-model name.
app.directive("outDynamic", function($compile){
return{
link: function(scope, element, attrs){
var template = "<input type='number' ng-model='" + scope.ray[attrs.element1] + "'>";
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
}
} });
However: none of the following works (when nested in the ng-repeat)
<!-- None of these work -->
<td out-dynamic element1=$index></td>
<td out-dynamic element1="$index"></td>
<td> <input type='number' ng-model="array[$index]"> </td>
<td> <input type='number' ng-model="array['$index']"> </td>
Summary of issue;
Every time I try and reference the $index tracker, I get an
undefined error in my directive code.
You should use {{}} to assign $index value for attribute. so use
element1={{$index}} instead of element1=$index
<tr ng-repeat="x in names track by $index">
<td out-dynamic element1={{$index}}></td>
<td out-dynamic element1="{{$index}}"></td>
</tr>
I guess your scope.arr is perfect.
PLUNKER DEMO
So I'm calling a JSON string, and I want to split it in two at the ":" and use the two values to show in two separate td tags.
function testCtrl($scope) {
$scope.response = {"name":["The name field is required."],"param":["Hobby: Coding", "Country: USA"]};}
to visualize a little more at what I'm trying to do http://jsfiddle.net/8mnxLzc1/5/
You could try this:
<table>
<tr ng-repeat="resp in response.param">
<td ng-repeat="val in resp.split(':')">{{ val }}</td>
</tr>
</table>
Fiddle
This is a entirely angular solution, no need to call the function split in the ng-repeat.
https://jsfiddle.net/kLjzh565/
<table>
<tr ng-repeat="resp in response.param track by $index">
<td ng-repeat="i in [$index]">
{{response.param[i]}}
</td>
</tr>
</table>
I have a table which has a dropdown above each column where the number of columns is dynamic. I created this as follows
<table class='table' >
<tr>
<th ng-repeat= "item in importTable[0]">
<select ng-model="selectedItem" ng-options="i.Name for i in optionList"></select>
</th>
</tr>
<tr ng-repeat="row in importTable">
<td ng-repeat="item in row">{{ item }} </td>
</tr>
</table>
Where optionList is the list of options in the dropdowns. All of the dropdowns have the same optionList.
How do I add the selected item along with the index of the column it is above to the scope to the model?
Here is a link to JSfiddle http://jsfiddle.net/U3pVM/769/ just click import. I want to be able to define which column is which type.
You may use $index variable that is provided by ngRepeat to set the ngModel to a specific item in an array:
In your controller you first define the array that will hold all the models:
function ImportCtrl($scope) {
$scope.selectedItems = [];
...
}
And than, inside the ngRepeat you refer your ngModel to a specific item inside the selectedItemsarray:
<select ng-model="selectedItems[$index]" ng-options="i.Name for i in columnNames"></select>
Demo FIDDLE