0

I am using ng-grid in my application using AngularJS framework. I am getting value for ng-grid using API . The API returns the result having plaintext as well as html tags. Inside ng-grid, I want to display only plain text.

Here is the enter code herePlunker

I have entered the values manually but in my case, it comes from API.

Any suggestions ? Thanks in advance.

mpatel
  • 348
  • 2
  • 13
  • Is you question about how to strip html tags from your data? If so, please remove the angularjs tag as the question doesn't pertain to angular – New Dev Sep 24 '14 at 20:41
  • Yes. I want to strip html tags. Question updated. Thanks – mpatel Sep 24 '14 at 20:44

2 Answers2

0

It looks like your HTML is being converted to plain text, but what you probably are looking for is to have the HTML tags stripped out and keep just the text.

If that is what you're trying to do, see this question and its answers: Get the pure text without HTML element by javascript?

Note that the accepted answer is not the best answer.

Community
  • 1
  • 1
James
  • 3,051
  • 3
  • 29
  • 41
  • In my ng-grid, my columnDef is like this: `{ field: 'Description', displayName:'Description' }` In this case, my data is inside Description. How can perform an operation to strip out the html tags? – mpatel Sep 24 '14 at 20:49
0

You would probably need to use ngSanitize and cellTemplate

include <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-sanitize.js"></script>

inject the dependency ngSanitize

and change your ngGrid options as

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [
      {field: 'name', displayName: 'Name'}, 
      {field:'descr', displayName:'Description', cellTemplate:'<div ng-bind-html="row.entity.descr"></div>'}]
};

This will take your data in html formate, so incase you provide the text, it will show you the text and read json likewise

Demo http://plnkr.co/edit/RFmZmL0lCQe9qw8Y8HkN?p=preview

Hope this is what you want

Aditya Sethi
  • 10,486
  • 11
  • 26
  • 31
  • you can install angular-sanitize by bower install as well, or just include it from the angular folder that you have in your project – Aditya Sethi Sep 24 '14 at 21:10
  • This is what I wanted to have. Thank you so much. :) – mpatel Sep 24 '14 at 21:22
  • Now I am using Popover to pop-up the description and it is working fine but it stills shows up the text with html tags. Can I stripped it out from there as well? here is the code: `var templatePopover = '
    {{row.getProperty(col.field)}}
    ';`     – mpatel Sep 24 '14 at 21:28
  • I think popover is some directive that you are trying to use. I am not sure if it supports html sanitize property. It is always good to have your customize directive if you need so much of functionality. What I understand from your comment is that you are tying to show some extra info on popup. Shouldnt it be different field? As you are already showing the data in column. Why do you want to show the same thing in popup? – Aditya Sethi Sep 24 '14 at 21:35
  • The reason why I want to show in popup is because the description is too long to see in the column. So, I want to popup the description on mouseover. It is working fine. I am having problem only because it shows me html tags as well. That code is `popover="{{row.entity.Description}}"`. Here it gets the value of description which comes from API, without stripping out the html tags. – mpatel Sep 24 '14 at 21:40
  • Ah, In that case create a customize popup and bind your model with html-safe. – Aditya Sethi Sep 24 '14 at 21:43
  • I have created custom popup css. but can you provide piece of code for the template I am having as I have commented above using html-safe? – mpatel Sep 24 '14 at 21:51
  • I did not able to understand that link. I used popover referring this [question](https://stackoverflow.com/questions/25672756/popover-in-ng-grid). Can you help me to display popover with stripping out html tags and display only plain text ? – mpatel Oct 15 '14 at 22:25