What is the reason for \n and <br> not functioning in a string?

I am encountering an issue when attempting to print the content of an object. Some of the properties within the object contain
tags, making it challenging to create new elements in JavaScript without knowing which properties will include these tags. However, the content is not rendering properly in my browser. It seems like I may be overlooking a straightforward concept here... An example is given below:

JSFiddle: http://jsfiddle.net/tvzgypd6/3/

Here is a sample object illustration that is not displaying correctly when using ng-repeat in Angular:

$scope.objs = [
    {a : 'test 1 <br> test 1'},
    {a : 'test 2 '},
    {a : 'test 3'},
    {a : "test 4 \n test 4"},
    {a : 'test 5 \n test 5'},
]
javascriptangularjs

Answer №1

To accomplish this, utilize CSS styles:

p {
    white-space: pre;
}

Check out this modified version of your fiddle: http://jsfiddle.net/em0r3krw/

Answer №2

To display HTML content, you can utilize ng-bind-html and ng-sanitize:

angular.module('example', ['ngSanitize'])

<li ng-repeat="item in items">
    <p ng-bind-html="item.content"></p>
</li>

In HTML, \n does not create new lines. To achieve this, you can apply white-space: pre; as suggested by zwacky:

p {
    white-space: pre;
}

Check out this JsFiddle demo for reference.

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

Breeze js requests metadata without needing to make a second call to the server

Currently, I am developing an Angular application that utilizes Breeze JS and ASP.NET OData controller. While testing, I encountered an issue where Breeze JS successfully makes the initial call to retrieve metadata from the server but fails to make the sec ...

javascriptangularjsodatabreezeasp.net-web-api2

The Facebook login popup has been disabled

My current challenge involves using a Facebook app to authenticate my users. If the user is not logged in to Facebook (which I verify with FB.getLoginStatus()), I provide them with a button to log in. The issue I am facing is that the pop-up for logging in ...

facebookangularjs

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

javascriptcssmeteormouseenterspacebars

How to highlight all the text within a 'pre code block' when double-clicked using JavaScript

Is there a way to make code blocks on my blog automatically selected when double-clicked without using jQuery? Here is the code I have so far: I apologize if this is a silly question, I am still learning! <script type="text/javascript" src="https://c ...

javascriptjquery

Linking controller scope to service characteristics

Recently, I have been exploring the utilization of services within controllers and specifically binding scope properties on a controller to properties in a service. In reviewing the code snippet below, I noticed that the $scope.stockCountProp in my contro ...

angularjs

Using Angular.js to Make a $http.get Request from a Different Controller

I am utilizing an HTTP resource that provides a JSON list of top 10 entities from a database by calling it in this manner: var filter= "john"; var myApp = angular.module('myApp', []); myApp.controller('SearchController', [&apo ...

javascriptangularjsangularjs-scope

Deactivate the signup button automatically when the user is not present, without the need to refresh

To determine user availability, the system will check the table of users. If the user is available, the signup button will be displayed; otherwise, the button will remain disabled or its color may change. ...

javascripthtmlajax

Retrieve the text value from a single object by utilizing jQuery

I am struggling with customizing a product page that lists various products in a list format. My goal is to create an alert that displays only the name of the product when clicked, rather than showing both the name and price as it currently does. Can someo ...

javascriptjqueryhtml

What is the best way to organize AngularJS Routes into a separate file?

Is there anyone out there who has experience with splitting routes from the main app config function? My list of routes is becoming too extensive, and I am interested in moving them to a separate file and then loading them into the main config. Although ...

angularjsangular-ui-router

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...

javascriptjqueryhtmlajax

The custom service is failing to load, in the simplest terms possible

After creating a dataService.j that contains the following: angular.module('dataService', []) .service('gameDataService', function() { var _gameData = { loggedIn: "false", gameJoined:"false", tableFu ...

javascriptangularjs

Gatsby is throwing an error because the location props are not defined

I am attempting to utilize location props in my Gatsby page. In pages/index.js, I am passing props within my Link: <Link state={{eventID: event.id}} to={`/date/${event.name}`}> </Link> In pages/date/[dateId]/index.js: const DateWithId = ( ...

javascriptreactjsgatsby

Managing Actions in React-Redux: Understanding the Dispatch Function

While I am delving into the world of React, I stumbled upon an example that looks like this: //index.js const store = createStore(reducer) render( <Provider store={store}> <AddTodo /> </Provider>, document.getElementById(' ...

javascriptreactjsecmascript-6react-redux

Encountering unexpected fetch requests to JSON files when using getStaticProps/getStaticPaths

My webpage seems to be functioning correctly, however I have noticed that in the console there are 5, 404 errors appearing on fetch requests. It's puzzling where these errors are originating from. Interestingly, these 404 errors only occur in the pro ...

javascriptreactjsnext.jshttp-status-code-404

The regular expression used for validating domains does not function properly in the Safari browser

I am struggling with a JavaScript regular expression error that Safari is giving me. I am trying to validate a domain, but for some reason, this specific part (?<!-) is causing the issue because the domain name should not end with a hyphen. ^((?!-)[A-Z ...

javascriptregexsafari

Is the text in bold format or not detectable in contenteditable mode?

I am currently working on developing a custom text editor using the built-in contenteditable feature in HTML. I am trying to figure out how to determine whether the selected text is bold or not within the editor. This is what my current setup looks like: ...

javascriptjqueryhtml

Injecting script into a webpage and initiating an ajax request prior to receiving a response

Trying to accomplish something a bit complex that I believe is feasible, or perhaps someone could offer a suggestion on how to achieve it. At website A, there is a database containing booking data. At website B, the goal is to display information about w ...

javascriptphpjqueryajaxxss

Implementing a Tab on Firefox Extension Upon Window Load

I have a requirement to add a tab whenever a new Firefox window is loaded for my bootstrap extension. Below is the code snippet I am using: var WindowListener = { setupBrowserUI: function(window) { window.gBrowser.selectedTab=window.gBrowser.a ...

javascriptfirefoxfirefox-addon

Changing the text color in a React Native TouchableHighlight component

How does TouchableHighlight change the text color when tapped? I have already configured the backgroundColor using underLayColor. Here is my updated code snippet: <TouchableHighlight style={{ borderRadius: 5}} ...

javascriptiosreactjsreact-native

Unused function in Vue error compilation

I am facing an issue with the compiler indicating that the function 'show' is defined but never used. The function show is being used in HTML like this: <b-card> <div id="draw-image-test"> <canvas id="can ...

javascriptvue.js