<tr class="ng-table-team" data-card="card-{{cardIndex}}">
<td data-label="{{data.fields.label}}" ng-repeat="field in data.fields" ng-show="key != 'attributes'" ng-if="obj.isTrue" rowspan = {{obj.count}}>
<div class="slds-truncate" ng-if="data.fields[$index].label === 'Name'" data-label="{{data.fields[$index].label}}">
<span>{{obj.Name}}</span></br><span> {{obj.Email}}</span>
</div>
<div ng-if="data.fields[$index].label != 'Name'" data-label="{{data.fields[$index].label}}">
{{obj | getter: data.fields[$index] | picker: data.fields[$index].type}}
</div>
</td>
<td data-label="{{data.fields.label}}" ng-repeat="field in data.fields" ng-show="key != 'attributes'" ng-if="!obj.isTrue">
<div class="slds-truncate" ng-if="data.fields[$index].label === 'Name'" data-label="{{data.fields[$index].label}}">
<span>{{obj.Name}}</span></br><span> {{obj.Email}}</span>
</div>
<div ng-if="data.fields[$index].label != 'Name'" data-label="{{data.fields[$index].label}}">
{{obj | getter: data.fields[$index] | picker: data.fields[$index].type}}
</div>
</td>
I am new to Angular JS and trying to apply rowspan here based on my scenario. Can anyone help here as to what am I doing wrong ?
Related
I have a simple table that I'm doing sorting on, and I'd like to be able to sort by one of two columns (date or 'has attachment'), but keep specific records at the top of the table (records that are 'pinned') and just sort the rows AFTER that.
Html Code
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50px" class="centered">
<div class="icon-refresh clickable" ng-click="loadNotes()"></div>
</th>
<th class="clickable colored_text" style="width: 50px" ng-click="sort('LastModified')">Last Modified</th>
<th class="clickable colored_text" style="width: 50px" ng-click="sort('HasAttachment')">Attachment</th>
<th>Note</th>
</tr>
</thead>
<tr ng-show="notesLoaded == true && notes.length == 0">
<td colspan="3">No notes found.</td>
</tr>
<tr ng-repeat="note in notes | filter: myFilterNotes | orderBy: noteSortOrder: noteSortDirection | startAt: (currentPage-1)*pageSize | limitTo :pageSize " ng-class="{'pinned': note.Pinned}">
<td class="span1"><button class="btn btn-inverse" ng-click="editNote(note.Id)" ng-show="(note.CreatedBy == history.currentUserId && note.TypeId === 0) || (history.canEditNotes && note.TypeId === 0)">Edit</button></td>
<td>{{note.LastModified | date:'MM/dd/yyyy h:mm a'}}</td>
<td class="centered">
<span ng-if="note.HasAttachment">
<a href ng-click="downloadAttachment(note)"><i class="icon-paper-clip icon-1point5x" title="{{note.NoteFileName}}"></i></a>
</span>
</td>
<td class="forceWordWrap">
<div class="span11">
<span ng-show="note.TypeId === 1">(Lead Note) </span>
<span ng-if="note.IsValidHtml" ng-bind-html="note.Note"></span>
<span ng-if="!note.IsValidHtml" ng-repeat="line in (note.Note | newlines) track by $index">
{{line}}<br/>
</span>
<span style="color: #bbb; font-size: 85%; font-weight: normal">
<p style="margin: 0;">-- created by {{(note.CreatedByName.length > 0) ? note.CreatedByName : "Unknown"}} on {{::note.CreatedDate | date:'MM/dd/yyyy h:mm a' }}</p>
<span ng-show="note.LastModifiedBy.length > 0">
<p style="margin: 0;">-- last modified by {{::note.LastModifiedBy}}</p>
</span>
</span>
</div>
<span class="span1" ng-show="note.Pinned" style="color: rgb(255, 0, 0);">
<i class="icon-pushpin icon-1point5x"></i>
</span>
</td>
</tr>
</table>
The Angular Sort method
$scope.noteSortDirection = true;
$scope.noteSortOrder = ["Pinned", "HasAttachment"];
$scope.sort = function (column) {
$scope.noteSortDirection = !$scope.noteSortDirection;
var sortColumnWithDirection = $scope.noteSortDirection !== true
? "-" + column
: column;
var newSortOrder = ["Pinned", sortColumnWithDirection];
$scope.noteSortOrder = newSortOrder;
};
The initial multi column sort is working fine, but when I click on either of the headers, it sorts the 'pinned' stuff in some wonky ways. (screenshots below)
This is working great!
This, not so much. It's like it does the sort exactly how I want, and then reverses the entire thing! (grr)
Ideally, this is what I want!
Solved it. I removed the sort order from the ng-repeat:
<tr ng-repeat="note in notes | filter: myFilterNotes | orderBy: noteSortOrder: true | startAt: (currentPage-1)*pageSize | limitTo :pageSize " ng-class="{'pinned': note.Pinned}">
and updated the custom sort method to deal with the sort order at the right time:
$scope.sort = function (column) {
var sortDir = $scope.noteSortDirection;
var revSortDir = !sortDir;
var sortColumnWithDirection = revSortDir !== true
? "-" + column
: column;
var newSortOrder = ["Pinned", sortColumnWithDirection];
$scope.noteSortDirection = !$scope.noteSortDirection;
$scope.noteSortOrder = newSortOrder;
};
On ng-click of a <div> I am showing a particular <div> and doing some filtering. I need the filter to happen on more than one value.
In the code below I want something like
filter if evaluationStatusId == 11 or 12
HTML :
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='9'">
{{Approved}}
</div>
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='10'">
{{submitdMissnDocs}}
</div>
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='11 || 12'">
{{Denied}}
</div>
<div class="row" name="empList" id="empList" ng-show="clickedStatus">
<table class="table table-bordered table-striped">
<tbody>
<tr ng-repeat="emp in Summary.CorpEmployees | filter: {locationId:selectedItem.Label} | filter: {evaluationStatusId:clickedStatus}">
</tbody>
</table>
</div>
You can use a filter function like this:
$scope.myFilter = function(emp){
return emp.locationid === $scope.selectedItem.Label || emp.evaluationStatusId === $scope.clickedStatus;
};
So your repeat expression would be:
<tr ng-repeat="emp in Summary.CorpEmployees | filter: myFilter">
I am getting error while rendering table based on provided columns definitions and row data (2 different JSON objects) using nested 'ng-repeat' and ng-switch directives:
Is there any way to use 'ng-repeat' and ng-switch for rendering table cells without using wrapper elements.
Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Here is my table template
<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}}">
<tbody>
<tr ng-repeat="record in data">
<td ng-repeat="col in metaData.columns" ng-switch on="col.type"
ng-switch-when="index"> {{record.$index + 1}} </td>
</tr>
</tbody>
Work around I made for time being
I am using ng-if to render table cell and rows dynamically in following way:
<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}} vk-table" >
<tbody>
<tr ng-repeat="record in data | orderBy : sortBy : reverse">
<td ng-repeat-start="col in metaData.columns" ng-if="col.type == 'index'"> {{$parent.$parent.$index + 1}}. </td>
<td ng-if="col.type =='name'">{{record.name = [record.fname, record.mname, record.lname].join(' ') }}</td>
<td ng-if="col.type =='date'">{{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}}</td>
<td ng-if="col.type =='inMobile'">
{{record[col.dataKey]}}
</td>
<td ng-if="col.type =='email'">
{{record[col.dataKey]}}
</td>
<td ng-if="col.type =='gender'">{{record[col.dataKey] == 'm' ? 'Male' : 'Female'}}</td>
<td ng-if="col.type =='place'">{{record[col.dataKey].name}}</td>
<td ng-repeat-end ng-if="!col.type">{{record[col.dataKey]}}</td>
</tr>
</tbody>
</table>
How can I achieve same output using ng-switch without using additional elements?
The ng-switch-when directive should be applied on a child element of the element where the ng-switch directive is applied. In your case, you applied them on the same element.
Try (inside tbody)
<tr ng-repeat="record in data | orderBy : sortBy : reverse">
<td ng-repeat="col in metaData.columns">
<div ng-switch on="col.type">
<div ng-switch-when="index">
{{record.$index + 1}}
</div>
<div ng-switch-when="name">
{{record.name = [record.fname, record.mname, record.lname].join(' ') }}
</div>
<div ng-switch-when="date">
{{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}}
</div>
<div ng-switch-when="inMobile">
{{record[col.dataKey]}}
</div>
<div ng-switch-when="email">
{{record[col.dataKey]}}
</div>
<div ng-switch-when="gender">
{{record[col.dataKey] == 'm' ? 'Male' : 'Female'}}
</div>
<div ng-switch-when="place">
{{record[col.dataKey].name}}
</div>
<div ng-switch-default>
{{record[col.dataKey]}}
</div>
</div>
</td>
</tr>
I have this ng-repeater which looks like this:
<ul>
<li ng-repeat="item in controller.collections.data | orderBy: '-plannedCollectionDate'">
{{ item.plannedCollectionDate | date: 'fullDate' }}
</li>
</ul>
and this works fine, it gets my data and orders it in reverse, but when I try this with the groupBy filter, the orderBy is ignored.
I tried it like this at first:
<div ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate' | orderBy: '-plannedCollectionDate'">
{{ key | date: 'fullDate' }}
<table class="table table-hover table-light">
<tbody>
<tr ng-repeat="collection in value | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
But it didn't work. After using google I found a solution that suggested this:
<div ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-plannedCollectionDate'">
{{ group.$key | date: 'fullDate' }}
<table class="table table-hover table-light">
<tbody>
<tr ng-repeat="collection in group | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
But this doesn't work either.
Can someone help me fix this?
the user group of angular-filter have written what needs to be done here
example: groupBy returns an object but orderBy fiter expects an array ..so use toArray:true AND give orderBy an array to work with:
Controller:
$scope.objectToArray= function(arr) {
return $filter('objectToArray')
($filter('map')(arr, 'id'));
}
View:
noworderBy can use $scope.objectToArray in your ng-repeat:
<div ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-objectToArray'">
GL!
I have a JSON array that I need to group by the date.
so using angular-filter I created this:
<ul ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate'">
Group name: {{ key | date: 'fullDate' }}
<li ng-repeat="item in value">
item: {{ item }}
</li>
</ul>
which is fine, but what I actually want to generate is a table. I tried this:
<div ng-repeat="(key, value) in controller.collections.data | groupBy: 'plannedCollectionDate' | orderBy: 'plannedCollectionDate'">
{{ key | date: 'fullDate' }}
<table class="table table-hover table-light">
<tbody>
<tr ng-repeat="collection in value | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
which again works fine, it generates a table for each group though. What I would prefer is to have one table with a header for the groupBy dates and then trs for the inner repeat. I imagine I have to do something like ng-repeat-start but I can't get it to work.
Has anyone got any idea how to do what I need?
Actually this wasn't too hard to figure out.
I just changed the way I was thinking about the headers.
This is my solution:
<table class="table table-hover table-light">
<tbody ng-repeat="group in controller.collections.data | groupBy: 'plannedCollectionDate' | toArray: true | orderBy: '-plannedCollectionDate'">
<tr>
<th colspan="3">
{{ group.$key | date: 'fullDate' }}
</th>
</tr>
<tr ng-repeat="collection in group | filter: controller.filter" ng-click="controller.select(collection)" ng-class="{ active: controller.isSelected(collection), warning: collection.status.id === 2, success: collection.status.id === 4, danger: collection.status.id === 5 }">
<td>
<div>{{ collection.supplierName }} {{ collection.description }}</div>
<div>to be collected by {{ collection.customerName }}</div>
</td>
<td>
<a ui-sref=".collect({ selected: [collection]})">{{ collection.status.name }}</a>
</td>
<td>
<button class="btn btn-danger" ng-click="controller.delete(collection.id)">
<span class="fa fa-close"></span>
</button>
</td>
</tr>
</tbody>
</table>