angular js search by column - javascript

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

Related

rowspan for 3 columns using angularJS

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>

How to add select all for each column separately in dynamic table angular 2

I have designed dynamic input matrix table. In that need to add select all option for each column. How to do that?
Here code:
<table [ngClass]="{'isDisplay': hasACLAccess}" class="responsive-table-input-matrix" id="matrixTable">
<thead>
<tr>
<th>Features/Roles</th>
<th *ngFor="let column of TableConfiguration.columns;">
{{column.title}}
<th>
</tr>
</thead>
<tbody *ngFor=" let feature of featureNameList">
<tr>
<td>{{feature.name}}</td>
<td *ngFor="let a of feature.roles">
<input name="access" [(ngModel)]="a.access" type="checkbox"
(change)="accessArrayList($event)">
</td>
</tr>
</tbody>
</table>
Thanks in advance.
In this, if checkbox of HR checked, then all checkboxes belongs to HR column should select, likewise for unchecked state also.

filtering a json file by keyword

Im missing something with my json file that I cant seem to figure out. I am creating a search by keyword with angular, and im using an external json file as the data. Currently, without filtering, It gives me all of the table cells, as opposed to just the ones I want.
The end result would be to have it only repeat over the subjects for each category. And for some reason its repeating over all of them for each subject, and only showing the ones i ask for. This leaves large gaps of empty cells.
html:
<div class="col-sm-12" style="padding:0px;padding-top:25px;margin-top:180px;">
<form>
<div class="form-group" style="border-bottom:1px solid white;">
<input ng-model="searchText" type="text" class="form-control logon-input" id="username" placeholder="Search" autofocus>
</div>
</form>
</div>
<div class="col-sm-12" style="padding:0px;">
<table class="table">
<tr>
<th>CONTENT</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_1}}</td>
</tr>
<tr>
<th>SOCIAL MEDIA</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_2}}</td>
</tr>
<tr>
<th>SOCIAL MEDIA TRACKING</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_3}}</td>
</tr>
<tr>
<th>ENGAGEMENT</th>
</tr>
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_4}}</td>
</tr>
</table>
</div>
angular:
app.controller('search_ctrl', ['$scope','$http',
function($scope,$http) {
$http.get('js/data.json').then(function(response){
$scope.categories = response.data;
});
}]);
json:
[
{"subject_1":"Owned Content"},
{"subject_1":"Earned Content"},
{"subject_2":"Social Media Platforms"},
{"subject_2":"Facebook"},
{"subject_2":"Instagram"},
{"subject_2":"Snapchat"},
{"subject_2":"Twitter"},
{"subject_2":"Youtube"},
{"subject_2":"Radarly By Linkinfluence"},
{"subject_3":"Impressions"},
{"subject_3":"Owned Impressions"},
{"subject_3":"Earned Impressions"},
{"subject_3":"Reach"},
{"subject_3":"Owned Reach"},
{"subject_3":"Earned Reach"},
{"subject_4":"Engagement Actions"},
{"subject_4":"Engagement Rate"}
]

Angular is working fine in its way you need to change your code something like
from
<tr ng-repeat="item in categories | filter:searchText">
<td>{{item.subject_4}}</td>
</tr>
to
<tr ng-repeat="item in categories | filter:searchText" ng-if="item.subject_4">
<td>{{item.subject_4}}</td>
</tr>
Working demo

Angular table loading spinner on table columns visibility change

I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>

Get value of parent item using child slug ng-repeat

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>

Categories

Resources