I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>
Related
I have a category list that contains name and subject list.
The subject list contains name and course list.
The course list contain name.
I want to display this data in table that will rowspan category or subject if they are the same. For example:
Category Subject Course
cat1 sub1 ''
sub2 cour1
cour2
sub3 ''
cat3 ''
Currently I have it working for two columns using this:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.name }}</td>
</tr>
</tbody>
</table>
However, I am having trouble doing it for 3 columns. This is the code I have that is not working. The course name are not being displayed and subject name become listed in column order instead of row order. Any suggestion:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
<tr ng-repeat="course in subject.courseList">
<td>{{ course.name }}</td>
</tr>
</tr>
</tbody>
</table>
Sample Data:
[
{"id":95,"categoryName":"A new catagory",
"subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
{"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
"courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
{"id":93,"categoryName":"David Test",
"subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
"courseList":[{"coursename":"newewst1","curcount":0}]}]},
{"id":116,"categoryName":"New Category",
"subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
"courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
{"id":0,"categoryName":"cat1",
"subjectList":[{"id":15,"subjectname":"test","curcount":4,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
{"id":11,"categoryName":"cat2",
"subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
"courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
{"id":12,"categoryName":"cate3",
"subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
"courseList":[{"coursename":"cous1","curcount":0}]}]},
{"id":163,"categoryName":"emptylist",
"subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
]
This is current code I am testing. It will will rowspan the category, display each subject once and then display all the courses for each subject in list in a single cell. I would prefer to rowspan subject too, but this is what I got working so far.
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.subjectname }}</td>
<td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
</tr>
<td ng-if="category.subjectList.length==27"> </td>
<td ng-if="category.subjectList.length==27"> </td>
</tbody>
</table>
Thanks,
AB
The two column case should be:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
{{subj.name}}
</td>
</tr>
</tbody>
For the three column case, nest a <table> in the <td> element:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
<table>
<tr ng-repeat="class in subj.classList">
<td rowspan="subj.classList.length+1">
{{subj.name}}
</td>
<td>
{{class.name}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
I have an array which contains other arrays inside like that:
array = [
["element A", "element B"],
["YES", "NO"]
]
And I want to loop through this array of object in an HTML table using ngFor:
<table>
<thead>
<tr>
<th>#</th>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
</tr>
</thead>
<tbody>
<template *ngFor="let row of csvContent; let in = index">
<th scope="row">{{in}}</th>
<template *ngFor="let c of row; let in = index">
<td>
{{c[0]}}
</td>
</template>
</template>
</tbody>
</table>
I want to display each inner array list below COLUMN1 and COLUMN2 respectively:
COLUMN1 | COLUMN2
--------------------
element A | YES
element B | NO
I can't figure it out how to use *ngFor properly in order to list an array of arrays (Simple list of strings). At the moment, it's either an empty array or a shifted & messed up Table presentation.
This is how looks the Table:
Or this wrong presentation because Element A and B should be below COLUMN 1 and YES, NO should be below COLUMN2:
Your data is not arrays in arrays; it's two connected arrays. You need to treat it as such:
<tbody>
<tr *ngFor="let column of csvContent[0]; let in = index">
<td>
{{csvContent[0][in]}}
</td>
<td>
{{csvContent[1][in]}}
</td>
</tr>
</tbody>
This is not really a good way of organizing your data, as stuff is not really related. What if csvContent[0] gets a new entry, but 1 doesn't? Right now, your data doesn't represent a table, and I'd recommend transforming it in your controller to be tabluar, and then printing.
Try this:
<table>
<thead>
<tr>
<th>#</th>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of csvContent;let i = index;">
<td>{{i}}</td>
<td *ngFor="let c of row">
{{c}}
</td>
</tr>
</tbody>
</table>
I wasn't sure how your data looked like, but seems like this would help.
You don't really need to use <template> tags (they're deprecated anyway in favor of <ng-template> tags.
Also, no need for index tracking if you're gonna access the array at that index anyway.
Simply loop like this
<table>
<thead>
<tr>
<th>#</th>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of csvContent;let i = index;">
<td>{{i}}</td>
<td *ngFor="let c of row">{{c}}</td>
</tr>
</tbody>
</table>
I got table with checkboxes but I don't know how to do something while checkbox is checked.
<md-table-container>
<table md-table md-row-select multiple ng-model="selected" md-progress="promise">
<thead md-head>
<tr md-row>
<th md-column></th>
<th md-column>ID</th>
<th md-column>Username</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="user" md-select-id="id" md-auto-select ng-repeat="user in users">
<td md-cell></td>
<td md-cell><span>{{ user.id }}</span></td>
<td md-cell>{{ user.username }}</td>
</tr>
</tbody>
</table>
</md-table-container>
How Can I check that checkbox is checked and do something?
add $scope.$watch on the variable that you are interested in (or watchcollection)
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Do not forget that variable you are watching is in $scope and propagation of variable into ng-if scopes happen by copying not reference. You can wrap variable into some container object, otherwise changes will happen in another scope and you never notice them.
I have data like
{ column : [a,b,c], data : [["a",1,2],["b",4,5],["c",3,2]]}
table structure
<input type="text" ng-module="search">
<thead>
<tr>
<th ng-repeat="n in column" ng-click="click($index)">n</th>
</tr>
</thead>
<tr ng-repeat="i in data | filter:search">
<td ng-repeat="j in i">i</td>
</tr>
how to make a search logic by columns?
I could search by any input but not by specific column
This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!
You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.