We Keep Coding

Fill data in dropdown onclick table row (based on table row data) in angular

How can I write a function that takes data from a dropdown, and fills in the table row containing that dropdown?
HTML:
<table id="DataTable" border="1" ALIGN="center">
<tr ALIGN="center">
<th>name</th>
<th>add</th>
<th>number</th>
<th>type</th>
</tr>
<tr class="tcat" *ngFor="let item of Tdata">
<td class="name">{{item.name}}</td>
<td class="add">{{item.add}}</td>
<td class="nyumber">{{item.number}}</td>
<td class="type" ALIGN="center">
<select *ngIf="dropData" (click)="jsFunction(item.number);">
<option>--Select--</option>
<option *ngFor="let currentData of dropData">
{{currentData.type}}</option>
</select>
</td>
</tr>
</table>
TS:
ngOnInit() {
// called first api and filled the data
this.Tdata=[
{ name: "xyz"
add: "abc"
number: 12345
type: null },
{ name: "xyz1"
add: "abc1"
number: 78900
type: null },
]
}
jsFunction(num){
// calling the second API here based of the given parameter and that
// is num.. for example I have clicked the dropdown on the first row
// which has number=12345 so in dropdown, dropData will fill the
// value type and that's not happening in my case
this.dropData=[
{number: "12345"
type: "customer"},
{number: "12345"
type: "dealer"},
{number: "12345"
type: "client"},
{number: "12345"
type: "master"},
]
}
whats should happen here is on first API call I will fill the table note that the type is null and in Html there is dropdown so after I click on any dropdown so there I will call the second API and pass that clicked row number in it and after second API call that clicked dropdown should fill data which I get in response so that I can select one-off that data.
I have explained my situation. please ask me if you don't get the question. searched on google but couldn't find anything related to this. there must be something that I missed or I don't know about that
thank you so much.

Try like this:
Template:
Bind (click) event in tr>:
<tr class="tcat" *ngFor="let item of Tdata" (click)="jsFunction(item.number);">
</tr>
TS:
jsFunction(num){
this.dropData= this.Tdata.filter(x => x.number == num)
}
Working Demo

filter table by drilling down json objects?

I am having trouble filtering a table by drilling down objects (by object´s object).
I have the object "match", which contains the object "team" which has the value name.
I would like to sort it like this:
<tr class="active" ng-repeat="match in matches | filter: {team1.name: filter, team2.name: filter}">
but cant find a way to do that.
here is my code:
<table class="table table-striped">
<tr>
<th>teams</th>
<th>time</th>
<th>field</th>
</tr>
<tr class="active" ng-repeat="match in matches | filter: {id: filter}">
<td>{{match.team.name}} vs {{match.team2.name}}</td>
<td>{{match.date}}</td>
<td>{{match.field.name}}</td>
</tr>
</table>
and my objects are here:
match = {
id: int
team1: obj
team2: obj
time: date
field: obj
};
team= {
id: int
name:string
};
field= {
id:int
name: string
location: string
};
can i configure the filter to do this, or do i have to do this in code?

how to insert more than one value in table cell in angularjs

In following table there can be more than one list on particular date. So For list column there can be more than one list for given date.
I am able to insert more than one value in single cell but it shift the row in which I inserted more than one value, Please look at DEMO.
Example: Table
Date...............List
12/1/2016 .... python, angularjs
13/1/2016..... java, html
data:
$scope.todolists = [{
date: '12/1/2016',
list: {python, angularjs}
}, {
date: '13/1/2016',
list: {java, html}
}];
view:
<tbody>
<tr ng-repeat="todolist in todolists" >
<td>{{todolist.date}}</td>
<td ng-repeat="list in todolist">{{subject}}</td>
</tr>
</tbody>
I tried ng-repeat inside ng-repeat but it is not working. So my question is how to insert more than one value in single cell in table.

Your references are wrong.
<tbody>
<tr ng-repeat="todolist in todolists" >
<td>{{todolist.date}}</td>
<td ng-repeat="list in todolist.list">{{list}}</td>
</tr>
</tbody>
or, preferably,
<tbody>
<tr ng-repeat="todolist in todolists" >
<td>{{todolist.date}}</td>
<td>
<span ng-repeat="list in todolist.list">
{{list + ($last ? "" : ", ") }}
</span>
</td>
</tr>
</tbody>

Your JSON is invalid. If you want to store values without properties, you need to use Array but not Object. Also, if the values are string you need to wrap them with comma like: ['val1', 'val2', ...];
You can do ng-repeat inside ng-repeat but you need to iterate the right property todolist.list.
You can't use {{subject}} if you have not property subject in you model. So you need to use {{list}} when you do the ng-repeat like ng-repeat="list in todolist.list".
The full code:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.todolists = [{ date: '12/1/2016', list: ['python', 'angularjs'] }, { date: '13/1/2016', list: ['java', 'html'] }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr ng-repeat="todolist in todolists">
<td>{{todolist.date}}</td>
<td ng-repeat="list in todolist.list">{{list}}</td>
</tr>
</table>
</div>

Your datas are not properly declared. It should be:
$scope.todolists = [{
date: '12/1/2016',
list: [
'python',
'angularjs'
]
}, {
date: '13/1/2016',
list: [
'java',
'html'
]
}];
Note the '' around python, etc. and the list should be a list => [] and not {}.
A nice way to go is to write a custom filter:
angular.module("myApp", [])
.filter('nicelist', function() {
return function(input) {
if (input instanceof Array) {
return input.join(",");
}
return input;
}
});
Then, you can use :
<table>
<tr ng-repeat="todolist in todolists">
<td>{{todolist.date}}</td>
<td>{{todolist.list | nicelist}}</td>
</tr>
</table>
Here is a working fiddle.

ngModel "Cannot set property of undefined" when using indexer

I have following markup
<div ng-app>
<table ng-controller="test">
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="col in cols">
<input type="text" ng-model="row[col].val" />
</td>
</tr>
</tbody>
</table>
</div>
controller looks like this
function test($scope) {
$scope.cols = ["col1", "col2", "col3"];
$scope.rows = [{
col1: { val: "x"}
}, {
col2: { val: "y" }
}]
}
When i try to set column value that does not yet exist, i get
"Cannot set property 'val' of undefined".
Example is here http://jsfiddle.net/z9NkG/2/
In documentation is note:
ngModel will try to bind to the property given by evaluating the
expression on the current scope. If the property doesn't already exist
on this scope, it will be created implicitly and added to the scope.
But it fails when using indexer instead of property name.
Is there a way to define ngModel expression dynamically or am i misusing angular?

And what about:
<input type="text" ng-model="row[col].val" ng-init="row[col] = row[col] || {}" />
Fiddle: http://jsfiddle.net/z9NkG/8/

I'm not sure about your model, but I think you are using a 2 dimensional array. I'm oversimplifying, not knowing,
make cols collection a child or rowsL
function test($scope) {
$scope.colnames = ["col1", "col2", "col3"];
$scope.rows = [{
cols: { col1: "x"}, { col2: "y"}
}, {
cols: { col1: "z"}, { col2: "a"}
}]
}
And then use nested ng-repeats
<table>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="col in row.cols">
<input type="text" ng-model="col.val" />
</td>
</tr>
</tbody>
</table>

The main problem is that you're setting an undefined property of an undefined object as the input's model. Angular does indeed automatically create the corresponding variables for your model binding, but to do so, you would have to bind the input directly to the row[col] property instead of row[col].val :
<input type="text" ng-model="row[col]" />
Here's the live demo: http://jsfiddle.net/z9NkG/9/

try this
make changes in controller
add below code
$scope.cols.forEach(function(x, y) {
angular.forEach($scope.rows, function(i, j) {
if ((i[x])== null)
i[x] = {};
});
})
yo can refer fiddle http://jsfiddle.net/z9NkG/10/

Adding rows with ng-repeat and nested loop

I'm looking for a way to add rows to a table. My data structure looks like that:
rows = [
{ name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
{ name : 'row2' }
];
I want to create a table which looks like that:
table
row1
row1.1
row1.2
row2
Is that possible with angular js ng-repeat? If not, what would be a "angular" way of doing that?
Edit:
Flatten the array would be a bad solution because if i can iterate over the sub elements i could use different html tags inside the cells, other css classes, etc.

More than one year later but found a workaround, at least for two levels (fathers->sons).
Just repeat tbody's:
<table>
<tbody ng-repeat="row in rows">
<tr>
<th>{{row.name}}</th>
</tr>
<tr ng-repeat="sub in row.subrows">
<td>{{sub.name}}</td>
</tr>
</tbody>
</table>
As far as I know all browsers support multiple tbody elements inside a table.

More than 3 years later, I have been facing the same issue, and before writing down a directive I tried this out, and it worked well for me :
<table>
<tbody>
<tr ng-repeat-start="row in rows">
<td>
{{ row.name }}
</td>
</tr>
<tr ng-repeat-end ng-repeat="subrow in row.subrows">
<td>
{{ subrow.name }}
</td>
</tr>
</tbody>
</table>

You won't be able to do this with ng-repeat. You can do it with a directive, however.
<my-table rows='rows'></my-table>
Fiddle.
myApp.directive('myTable', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var html = '<table>';
angular.forEach(scope[attrs.rows], function (row, index) {
html += '<tr><td>' + row.name + '</td></tr>';
if ('subrows' in row) {
angular.forEach(row.subrows, function (subrow, index) {
html += '<tr><td>' + subrow.name + '</td></tr>';
});
}
});
html += '</table>';
element.replaceWith(html)
}
}
});

I'm a bit surprised that so many are advocating custom directives and creating proxy variables being updated by $watch.
Problems like this are the reason that AngularJS filters were made!
From the docs:
A filter formats the value of an expression for display to the user.
We aren't looking to manipulate the data, just format it for display in a different way. So let's make a filter that takes in our rows array, flattens it, and returns the flattened rows.
.filter('flattenRows', function(){
return function(rows) {
var flatten = [];
angular.forEach(rows, function(row){
subrows = row.subrows;
flatten.push(row);
if(subrows){
angular.forEach(subrows, function(subrow){
flatten.push( angular.extend(subrow, {subrow: true}) );
});
}
});
return flatten;
}
})
Now all we need is to add the filter to ngRepeat:
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Rows with filter</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows | flattenRows">
<td>{{row.name}}</td>
</tr>
</tbody>
</table>
You are now free to combine your table with other filters if desired, like a search.
While the multiple tbody approach is handy, and valid, it will mess up any css that relies on the order or index of child rows, such as a "striped" table and also makes the assumption that you haven't styled your tbody in a way that you don't want repeated.
Here's a plunk: http://embed.plnkr.co/otjeQv7z0rifPusneJ0F/preview
Edit:I added a subrow value and used it in the table to show which rows are subrows, as you indicated a concern for being able to do that.

Yes, it's possible:
Controller:
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.rows = [
{ name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
{ name : 'row2' }
];
}
]
);
HTML:
<table>
<tr ng-repeat="row in rows">
<td>
{{row.name}}
<table ng-show="row.subrows">
<tr ng-repeat="subrow in row.subrows">
<td>{{subrow.name}}</td>
</tr>
</table>
</td>
</tr>
</table>
Plunker
In case you don't want sub-tables, flatten the rows (while annotating subrows, to be able to differentiate):
Controller:
function($scope) {
$scope.rows = [
{ name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
{ name : 'row2' }
];
$scope.flatten = [];
var subrows;
$scope.$watch('rows', function(rows){
var flatten = [];
angular.forEach(rows, function(row){
subrows = row.subrows;
delete row.subrows;
flatten.push(row);
if(subrows){
angular.forEach(subrows, function(subrow){
flatten.push( angular.extend(subrow, {subrow: true}) );
});
}
});
$scope.flatten = flatten;
});
}
HTML:
<table>
<tr ng-repeat="row in flatten">
<td>
{{row.name}}
</td>
</tr>
</table>
Plunker

Here is an example. This code prints all names of all the people within the peopeByCity array.
TS:
export class AppComponent {
peopleByCity = [
{
city: 'Miami',
people: [
{
name: 'John', age: 12
}, {
name: 'Angel', age: 22
}
]
}, {
city: 'Sao Paulo',
people: [
{
name: 'Anderson', age: 35
}, {
name: 'Felipe', age: 36
}
]
}
]
}
HTML:
<div *ngFor="let personsByCity of peopleByCity">
<div *ngFor="let person of personsByCity.people">
{{ person.name }}
</div>
</div>