0

I am using SharePoint 2013 I want to display list data with REST and Angular js

my rich text field does not show properly how can I solve it.

I have added a content editor web part

My code is:

<script>  


var myAngApp = angular.module('SharePointAngApp', []);  
myAngApp.controller('spCustomerController', function ($scope, $http) {  
    $http({  
        method: 'GET',  
        url: "https://MyServer/sites/testdev/_api/web/lists/getByTitle('Announce')/items",  
        headers: { "Accept": "application/json;odata=verbose" }  
    }).success(function (data, status, headers, config) {  
        $scope.customers = data.d.results;  

    }).error(function (data, status, headers, config) {  

    });  
});  

</script>  

<h1>My Test Heading</h1>  

<div ng-app="SharePointAngApp" class="row">  
<div ng-controller="spCustomerController" class="span10">  
    <table class="table table-condensed table-hover">  
        <tr>  
            <th>Title</th>   

        </tr>  
        <tr ng-repeat="customer in customers">  
            <td>
            <a href="https://myserver.com/sites/testdev/Lists/Announce/DispForm.aspx?ID={{customer.ID}}">{{customer.Title}}</a>
           {{customer.Content}}

            </td>  
            </tr> 
    </table>  
    </div>  
</div>

the Content field is a field with multiple line of text or rich field when I run it in my browser it shows the content field text html also:

enter image description here how can I display a rich text field in its proper way?

3

1)Register ngSanitize module:

Add reference to angular-sanitize.js resource, for example:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Include ngSanitize module, for example:

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

2) Replace the line:

<td>...{{customer.Content}}</td>

with this one:

<td ng-bind-html="item.Content"></td> 

Follow this answer for a more details.

Complete example

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>
<script> 
var app = angular.module('SmartphoneOSList', ['ngSanitize']);  
app.controller('ListController', function ($scope, $http) {  
    $http({  
        method: 'GET',  
        url: "https://contoso.sharepoint.com/_api/web/lists/getByTitle('Smartphone OS')/items",  
        headers: { "Accept": "application/json;odata=verbose" }  
    }).success(function (data, status, headers, config) {  
        $scope.items = data.d.results;  
        $scope.displayFormUrl = "/news/Lists/SmartphoneOS/DispForm.aspx";  
    }).error(function (data, status, headers, config) {  
        //...
    });  
});  
</script>  


<h1>Smartphone OSes</h1>  
<div ng-app="SmartphoneOSList">  
    <table ng-controller="ListController">   
        <tr ng-repeat="item in items">  
            <td><a href="{{displayFormUrl}}?ID={{item.ID}}">{{item.Title}}</a></td>
            <td ng-bind-html="item.Content"></td>  
        </tr>  
    </table>  
</div>

enter image description here

  • Great, glad this helped you :) – Vadim Gremyachev Nov 6 '14 at 9:36
  • Extra feature: if i put a textbox in my page with a button how can I display results based on text box value on click of the button – Mehdi Jalal Nov 10 '14 at 7:05
0

Try

<div ng-bind-html-unsafe="customer.Content"></div>

This means you must trust the source, but as far as I know SharePoint won't let users without higher permission insert any dangerous markup.

But it's always good to be on the safe side, use ngSanitize and:

<div ng-bind-html="customer.Content"></div>
  • I added the ngSanitize and modified my code like this: <div ng-bind-html="customer.Content">{{customer.Content}}</div> – Mehdi Jalal Oct 30 '14 at 7:24
  • but it is not working again it shows the: <div class="ExternalClassE90D93A55B49490C8A4C63673EAA0654"> and my text – Mehdi Jalal Oct 30 '14 at 7:25
  • Don't do both ng-bind-html and {{customer.Content}}, only do the attribute – eirikb Oct 30 '14 at 7:25
  • how should i add please can you right that – Mehdi Jalal Oct 30 '14 at 7:27
  • It should work if you copy my example above. Note that Angular version can be important, make sure you have the latest – eirikb Oct 30 '14 at 7:29
0

You are using angular js. In angular js you can use ngSanitize which will resolve your problem and render html properly. You can download sanitize.js from Here

html for description will be like:

<tr ng-repeat="eachProjectDependencies in ProjectDependencies|filter:drpDownFilter">                           
                        <td ng-bind-html= "eachProjectDependencies.Description"></td>
                      </tr>

and in your js put dependency for sanitize.js like shown below.

var demoApp = angular.module("demoApp",["ngSanitize"]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.