Skip to main content

Maintaining Multi-line text format in AngularJS View

I was using AngularJS framework in SharePoint site and was trying to fetch data from a List and display using AngularJS view. The List had Multiple Lines of Text column with Rich Text enabled. The HTML markup looked like this:

<p>{{description}}</p>

Here description contains value from multi-line text field. However, it trims the HTML part and display only plain text.

I even tried using ng-bind-html as:

<p ng-bind-html="description"></p>

This also didn't solve the problem. This is where Angular filter came to the rescue.

Solution:

First we need to create a filter:

var myApp = angular.module('myApp', ['ngSanitize']); 

myApp.filter('trusted', function($sce){
    return $sce.trustAsHtml;
});


Note that, with this filter we are returning the HTML as trusted. Now, this filter should be used in the HTML:

<p ng-bind-html="description | trusted"></p>

This would keep the format intact!
Labels:

Comments

  1. VikashDecember 2, 2016 at 1:38 PM

    Thanks Suresh nice post...even ng-bind-html="description" worked for me, but font colors were not getting applied in view. but when I used ng-bind-html="description | trusted" it took care of all the styles.

    ReplyDelete
  2. SureshDecember 5, 2016 at 12:51 PM

    Thanks Vikash for the comments. The formatting such as Bold and Italic works as these are added as HTML elements. This filter takes care of CSS such as font color.

    ReplyDelete
  3. Ankit DhadwalMay 30, 2019 at 1:16 PM

    Wow... Thanks for your kind help.... :)

    ReplyDelete

Post a Comment

Popular posts from this blog

All about SharePoint List View Styles

Sometimes, there are out of the box features which we tend to ignore and later when we do apply, we are more than happy about the feature which is readily available in SharePoint. One such feature is List View Style. I never thought I would write a post on this. However, whenever I spoke about this with users, people were excited to see the result. That prompted me to write this post. Instead of getting into only theory part, I will basically take use cases where these styles can be applied and also touch up on on some minor limitations with certain style. When you are creating/modifying a List view, you will get an option to select View Style. As shown below, there are 8 options available and Default is always set if you ignore this style. List of View Styles I will take typical Contact List and Announcement List to explian about these styles. Let us go one by one. Default: This view, as name suggest, is the default style in a view. This is one of the widely seen style ...
1 comment
Read more

Document ID Service - New Feature in SharePoint

When I explored this new feature of SharePoint in Online (this feature is available in SharePoint 2013 also), I found it interesting because it solved one of the common problems people faced in SharePoint. I will first explain about this feature and I'll cover the problem and the solution in another post. This feature allows Site Collection Admin assign a unique ID to every document in the site collection out of the box. If you recall, there was no out of the box way to assign a unique number to the documents across libraries in a site collection. Yes ID column is unique but only within a library. Document ID column contains a number which is unique across libraries. To start with, let's have a look at a typical document library. This is a familiar view for SP guys. By default, you don't get Document ID column in a library. All Items View To get Document ID column, you need to activate a site collection feature "Document ID Service" as shown below. S...
Post a Comment
Read more

How to update Person field with multiple values using REST API

Person or Group field in SharePoint is similar to a Lookup field. When you are updating this field using REST API, you need to append "Id" to the name of the column in the body construct. For example, the body construct looks like this: data: { "__metadata": { "type": "SP.Data. ListName ListItem" }, "Title": "First Item", " PeopleField Id": "4" }; The highlighted portions should be replaced by the actual List Name and Column Name. In the above example, the REST call is updating a List item with Title and People columns. How to get the value for user ID ("4" in the above example) needs a separate explanation and that will be my next post! The above example works fine if Person field is configured to accept only one value. If we change the Person field to accept multiple values, how do we pass more than one value in the REST call? Since we normally separate user names with semicolon in peop...
12 comments
Read more