Is there a way to showcase the innerHTML while utilizing an angularJS {{expression}}?

My code is outputting a message in this format: 

<td class="Msg">
  <div class="collapse">
    <h4 class="message">{{statement.Msg}}</h4>
  </div>
</td>

No matter how I try to format it, the message always displays like this:

a, b, c, d, e

I need a linebreak after each comma. Looking at the innerHTML in FireBug shows that the format is correct.

How can I ensure that the innerHTML of the statement.Msg is displayed properly?

UPDATE: The message within the innerHTML contains \r\n as delimiters. This is how it's stored in the database and what I see in FireBug, but the formatting on the page is not reflecting this.

javascriptangularjs

Answer №1

To properly render HTML in AngularJS, it's essential to utilize ngSanitize along with ng-bind-html:

<h5 ng-bind-html="content.Desc"></h5>

Don't forget to include ngSanitize in your AngularJS module like this:

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

For a comprehensive guide and installation details, refer to: https://docs.angularjs.org/api/ngSanitize

Answer №2

My suggestion is to include white-space: pre; in the styling of the .message element (Refer to this document for various values that can be used with the white-space style).

For instance: 

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.statement = {Msg: "a,\r\nb,\r\nc,\r\nd"};
});
.message { white-space: pre; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="collapse" ng-app="app" ng-controller="ctrl">
    <h4>{{statement.Msg}}</h4>
    <h4 class="message">{{statement.Msg}}</h4>
</div>

It's important to note that if the h4 element does not have the message class, line breaks will not be displayed, whereas they will be visible on the second one which contains this class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the name of the path for the specified * stack within Express.js

When working with Express.js, I am utilizing '*' to catch the error 404. Is there a way for me to find out the path name of the error URL? app.get('*', (req, res) => { console.log("route: " + JSON.stringify(req.route) ...

javascriptnode.jsexpressroutes

The button is not activating the callback function when clicked. It is unclear why this is happening as no errors are being displayed in the console

Utilizing an event listener on the button element, the user is prompted to select a language first. Upon selection, the button in question is presented to them. Clicking on this button triggers a callback function that allows the user to begin the quiz. Ev ...

javascripthtmlcssbuttoncallback

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascripthtmlcssreactjs

Why does my Javascript cross-domain web request keep failing with a Status=0 error code?

UPDATE: I've been informed that this method doesn't work because craigslist doesn't have an Allow-Cross-Domain header set. Fair point. Is there an alternative way to download a page cross-domain using Javascript in Firefox? It's worth ...

javascriptcross-domaincraigslist

The GraphQL Resolver function that returns an object

When querying with GraphQL, I receive results in the following format: { "data": { "events": [ { "_id": "65f0653eb454c315ad62b416", "name": "Event name", " ...

javascriptgraphql

Using app.get('env') in local development and live production settings

var express = require('express'); var app = express(); var db_url; if(app.get('env') == "development"){ db_url = 'mongodb://127.0.0.1:27017/localhost'; }else{ db_url = 'something else'; } console.log(app.get(&apos ...

javascriptnode.js

Tips for preventing the execution of concealed forms

<script> $(document).ready(function(){ $("#hdcChoose").click(function(){ $("#hdcNumber").toggle(); $("#hdcNumber2").hide(); }); }); $(document).ready(function(){ $("#hdcWrite").click(function(){ $("#hdcNumber").hide(); $("#hdcN ...

javascriptphphtmlsql

I'm curious, what is the optimal method for arranging a json object based on an index contained in each of its properties?

I'm working with an array of objects, looking like this myArray = [ { id: 3, data: foo }, { id: 7, data: bar } ] However, I would like to transform it into the following structure transformedArray = { 3: ...

javascriptjson

Unable to modify a variable within a request

Having trouble updating a variable within a request? It seems like the variable doesn't change when it should. const request = require("request"); var all = JSON.parse(body); var steamplayer = all['response']['players']['play ...

javascriptjsonnode.jsrequest

Passing data to an Angular directive

I am facing an issue while trying to pass information through a view in a directive. Despite binding the scope, I keep seeing the string value 'site._id' instead of the actual value. Below is the code for the directive: angular.module('app ...

javascriptangularjs

Class component proceeding without waiting for function completion

My function, getactivity(), pulls and sorts data from an API and returns the sorted data in answer1 format. However, I am facing a problem where whenever I run the function to retrieve the data, it keeps returning nothing. Here is the full code: import Re ...

javascriptnext.js

What could be causing my HTML5 video control buttons to not function properly when using JavaScript?

I am currently working on a project that involves integrating external HTML buttons with a <video> element to control playback functions such as play/pause, rewind slow, rewind fast, and fast forward using JavaScript. Although I have successfully pos ...

javascripthtmlvideo

Incorporating MediaElement.js into an AngularJS environment

I am encountering an issue with a simple audio setup for mediaElement.js. It functions correctly with normal HTML/Js, but fails to work when implemented in AngularJS. The media player is displayed without any problems, however, when clicking the play butto ...

angularjsmediaelement.js

Enhance numerous animated shapes in Three.js

Just dipping my toes into the world of Three.js and tinkering with it for fun. My goal is to create a simple dynamic full-screen background for a webpage. You can check out the example here: function createHexagon( vertices, color ) { var geometry = n ...

javascriptperformancethree.js3d

Vue component doesn't update reactively until the template value changes

I have a child component in my Vue application that utilizes Vuex for managing certain values. Currently, when I trigger an action in the parent component, it should also trigger the child component. This is achieved by passing an active boolean prop to t ...

javascriptvue.js

Daterangepicker glitch causing default dates to display as [Invalid date]

I am currently utilizing the Daterangepicker plugin. The start and end dates I retrieve from the backend come in string format, for example (2020-02-22). However, when I try to pass these dates as default values, it doesn't seem to work as expected. ...

javascripthtmljquerydatepicker

Display a dropdown list using ng-repeat to prevent selecting the same value multiple times

Within my ng-repeat loop, I have a drop-down menu and an add button that allows users to add new drop-down menus to the list. However, I am looking for a way to restrict the second drop-down menu from selecting the same value as the first one. In other wor ...

javascriptangularjsangularjs-ng-repeat

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

javascriptangularjsxmlweb

Inspecting Mapped Data in React using the Console

For some reason, I am unable to console.log any selection when using onClick in this React component. My goal is to achieve the following functionality. https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx I have successfully fetc ...

javascriptreactjsredux

Executing getJSON requests in perfect synchronization of time

For my weather project, I have two JSON requests to make. The data from the first request is needed in order to personalize the second request for the user. The first request retrieves the latitude and longitude of the user, which are then required for the ...

javascriptjqueryjsonajaxjquery-deferred