How to remove plain text URL from data content column name offilneURL? - javascript

I face issue Cannot hide or remove URL exist as plain text on column name offilneUrl
I already do as link so that no need to plain text URL above
So I need to hide or remove or empty URL plain text above word page link .
<tbody>
<ng-container *ngFor="let repcon of ReportControl">
<tr *ngFor="let rep of contentBody">
<td *ngFor="let coln of headerCols">
<span>
{{rep[coln]}}
</span>
<div *ngIf="coln==repcon.fieldName">
<div *ngIf="repcon.columnType==1">
<a (click)="goToLink(rep.offilneURL)">page link</a>
</div>
</div>
</td>
</tr>
</ng-container>
</tbody>
I try as below
{{rep.offilneURL || " "}} but it repeated offlineURL with every row
so what i do to solve issue
see image below the text with green color that i need to remove because it .
post updated
structure of content body on ts file
this._displayreport.GetReportDetailsPaging(this.searchData).subscribe((data: any[]) => {
this.reportdetailslist = data;
this.headerCols = Object.keys(data[0]);
this.contentBody = data;
});
data structure for content body :
companyName: "Innovasic, Inc."
done: "0"
notImpacted: "0"
notificationDate: "2009-11-12"
offilneURL: "https://source.z2data.com/2019/1/13/8/55/47/351/662203977/21527_SPCN.PDF"
onlineURL: "N/A"
pending: "3"
reportDate: "2020-05-07"
revisionID: "272299243"
teamName: "MFG"
totalCount: 79
already have link
Updated post
https://stackblitz.com/edit/create-4ud1rg?file=app%2Fapp.component.html
according to my structure I need to change
<span *ngIf="coln != 'onlineURL'">
{{rep[coln]}}
</span>
to
<span *ngIf="coln != 'repcon.filedName'">
{{rep[coln]}}
</span>

It's just because:
<span>
{{rep[coln]}}
</span>
is still displaying the value regardless so just hide it if the column is the url
<span *ngIf="repcon.columnType != 1">
{{rep[coln]}}
</span>

Base on the content body structure and logic you shared, you can hide the link as follows.
Based on logic ==>
<span *ngIf="repcon.columnType!=1">
{{rep[coln]}}
</span>
I think you are showing the link based on the condition repcon.columnType==1, So check for converse to hide the offline link.
This can be handled in other way as well.
Based on structure ==>
<span *ngIf="coln != 'onlineURL'">
{{rep[coln]}}
</span>
Hope this helps.

Related

How an i change the pagination-control numbers(1 2 3) to other values like 'Anything1 Anything2 ...' using ngFor* on array in ngx-pagination?

Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
The above code will display pagination numbers like
I want to replace the number with values from an array [Anything1, Anything2, Anything3].
Here my data is fixed and I know my page number count and its details.
You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.
Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template
<pagination-template #p="paginationApi"
[id]="config.id"
(pageChange)="config.currentPage = $event">
<div class="custom-pagination">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>Anything{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>Anything{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
</div>
</pagination-template>

How to use limitTo filter dynamically to display long texts

I have a directive that generate a data-table.
I have to make a column in this data-table show a limit text, so I want a link that show the full text when I click on the link. Something like 'more or less'.
I have this code below. I believe the code is right, I get this solution here
<tbody ng-init="limit = 10; showed = false">
<tr ng-repeat="row in dataPaginated | orderBy: orderDefinitions">
<td ng-repeat="column in columns | orderBy: 'id'" ng-style="{ 'white-space' : (column.nowrap) ? 'nowrap !important' : 'normal' }"
ng-show="column.checked">
<div ng-if="column.isRichText">
<!-- I've already tried initiate the limit and showed variables here -->
<div >
{{ row[column.mapProperty] | limitTo : limit }}
<a ng-if="column.isRichText" ng-show="row[column.mapProperty].length > limit" href
ng-click="limit = row[column.mapProperty].length ; showed = true">more</a>
<a ng-if="column.isRichText" ng-show="showed" href
ng-click=" limit=10"> less</a>
</div>
</div>
<div ng-if="">
<!-- When the column isn't richText -->
</div>
</td>
</tr>
</tbody>
But it isn't working, The link more appear and when I click the limit is updated but the full text and the link less is not showed.

Add styles to function-returned data

I'm trying to add CSS styles to a string computed in Javascript. It goes through a series of transformation functions:
var fieldSetTransformation = setFieldTransformation(iteration);
fieldSetTransformation = stylePropertyName(fieldSetTransformation);
This value then is passed to a table generated in a directive through AngularJS's ng-repeat:
<tbody class="tableBody">
<tr ng-repeat="line in linesArray">
<td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
'center-text' : (!line[column.key] || line[column.key].length === 0)
}">{{line[column.key] !== undefined ? line[column.key] : '--'}}<span ng-if="column.key == 'user'">
<i id="plus-icon-styling"
class="fa fa-plus-circle action-icon">
</i>
</span>
</td>
</tr>
</tbody>
So I'm struggling to append it to an existing container.
What I have tried so far?
Injecting the HTML directly into the returned value:
var htmledField = [
'<span class="propertyNameHighlight">' + fieldSetTransformation,
'<span>'].join("\n");
];
No use, since this does not seem to be accepted anymore by current navigators (correct me if wrong) since it's a security issue.
The thrown result is just <span class="propertyNameHighlight">000000</span>
appearing in the table.
Creating the element, then appending it in the view
Also a no-go:
function stylePropertyName(data){
var newSpan = document.createElement('span');
newSpan.setAttribute('class', 'propertyNameHighlight');
document.getElementsByClassName("tableBody").appendChild(newSpan);
newSpan.innerHTML = data;
return data;
}
This returns a null function exception.
I have also checked this question, which seemed the closest to my query, but in my case there is no clear container neither to wrap up the resulting string.
TL;DR: What I'm trying to achieve?
This green text over here:
That represents a cell. The data is not directly passed, it's generated dynamically through a series of functions and ng-repeats.
Any help or related disregarded question that I could get is greatly appreciated. Thanks!
As suggested by commenter Stanislav Kvitash (thanks!), I solved this by using ngBindHtml :
<tbody class="tableBody">
<tr ng-repeat="line in linesArray">
<td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{'center-text' : (!line[column.key] || line[column.key].length === 0)}">
<span ng-bind-html="line[column.key] !== undefined ? line[column.key] : '--'"></span>
<span ng-if="column.key == 'user'">
<i id="plus-icon-styling"
class="fa fa-plus-circle action-icon">
</i>
</span>
</td>
</tr>
</tbody>

How to disable NgbTooltip if tooltip template is empty, in Angular2?

I'm showing an array of data inside a tooltip, so I used a template. My code looks like:
<ng-template #ToolTipTemplate>
<small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>
<span [ngbTooltip]="ToolTipTemplate">Months: {{data.months.length}}</span>
If data.months is empty I do not want the tooltip to appear. Currently if it's empty it shows the tooltip arrow only.
I've tried adding an *ngIf on the <small> tag inside the template, but that didn't work. I've also tried adding *ngIf into <ng-template> to no avail.
Ok, I was finally able to figure it out. Here's what I had to do
<span [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''">Months: {{data.months.length}}</span>
You can take the element reference like #t="ngbTooltip" and then manually fire the tooltip. In your case fire it if required or don't show the tooltip at all.
<div
[ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''"
triggers="manual"
#t="ngbTooltip"
(mouseenter)="(data.months?.length) && t.open()"
(mouseleave)="t.close()">
show Tooltip
</div>
You can disable it with
<span [ngbTooltip]="ToolTipTemplate" [disableTooltip]="true">Months: {{data.months.length}}</span>
See docs for more info: https://ng-bootstrap.github.io/#/components/tooltip/api
Simple way of doing is
<div *ngIf='data.months.length > 0'>
<ng-template #ToolTipTemplate>
<small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>
<span [ngbTooltip]="ToolTipTemplate">Show Info</span>
</div>
<div *ngIf='data.months.length === 0'>
<span>Show Info</span>
</div>
You can use disableTooltip input attribute.
https://ng-bootstrap.github.io/#/components/tooltip/api

How to select the right Id when clicked?

I am displaying users in a list with their photo, name etc... and then I am grabbing the value of the element that has the id "uid" :
$scope.toUserView = function() {
var uid = document.getElementById('userUID').textContent;
console.log(uid);
$state.go('tab.userview');
};
Problem is that whoever I click on, I always get the reference of the FIRST user in the list of the page and I would like to grab only the one I click on.
I tried to add .click() at the end of my var but it is not a function.
Any idea ?
EDIT : Corresponding HTML :
<ion-list class="item-border-off list-fav">
<a ><ion-item ng-click="toUserView()" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
</ion-list>
Corresponding HTML
<a ><ion-item ng-click="toUserView($index)" ng-repeat="user in users" class="item-remove-animate item-avatar">
<img ng-src="{{user.photoURL}}">
<h2 id={{user.uid}}>
{{user.name}}
</h2>
<p >{{user.description}}</p>
<p id="userUID{{$index}}">{{user.uid}}</p>
<!-- button options -->
<ion-option-button>
<i class="icon ion-ios-trash-outline"></i>
</ion-option-button>
<ion-option-button>
<i class="icon ion-ios-chatbubble-outline"></i>
</ion-option-button>
</ion-item></a>
JS
$scope.toUserView = function(ind) {
var uid = document.getElementById('userUID'+ind).textContent;
console.log(uid);
$state.go('tab.userview');
};
You seem to repeat the <p id="userUID"></p> in a loop.
id attributes should be unique to a page by definition.
document.getElementById('test') returns the first element having the id attribute set to test.
You should either add something unique to your ids, or use class="userUID" instead.

Categories

Resources