AngularJS array value with HTML tags is not displaying properly upon invocation

In Angular, I have an array that has the following structure:

$scope.posts = [
    {
        "ID" : id(),
        "Title" : "A",
        "Company" : "Company A",
        "Location" : "San Francisco, CA",
        "Date" : "2016-06-20",
        "Description": "Description<br>Desciption part 2",
     }
];

The description is displayed using 

<p>{{post.description}}</p>
within a div with ng-repeat = "post in posts".

However, the output appears as:

Description.<br>Description part 2

Instead of:

Description
Description part 2.

The same issue arises when trying to insert <ul> and <li> tags.

Is there a way to interpret the html structure within the array value to display it correctly as html rather than explicitly rendered like this?

javascriptarraysangularjs

Answer №1

For displaying HTML content, you can utilize ng-bind-html="post.Description".

Alternatively, consider using ngSanitize to sanitize the HTML.

Check out this example - https://jsfiddle.net/datachand/szc550yb/4/

If necessary, in the controller, you can use 

$sce.trustAsHtml(post.Description)

Answer №3

<p>{{post.Content}}</p>

upper-case Content

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

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

javascripthtmlcss

Trouble arises when selecting shapes in Angular 6 with FabricJS

Currently, I am experimenting with fabricjs and drawing different shapes. Interestingly, when I draw the shapes, they appear accurately on the canvas. However, when I try to switch to selection mode, I encounter an issue where I am unable to select the ind ...

javascriptangularfabricjsfabricjs2

creating a number + i formatted array in R

I am interested in creating an array in R where each number is incremented by a specific value according to the following parameters: i<-2 array1<-c(1:100) The desired array should look like this: 1,3,5,7,9, ...100 Thank you very much. ...

rarrays

Differences between Sequelize classMethods and instanceMethods

Embarking on my Node journey, I've decided to explore Sequelize. Initially, my focus was on understanding the following code: 'use strict'; var crypto = require('crypto'); module.exports = function(sequelize, DataTypes) { var U ...

javascriptnode.jsormsequelize.js

Synchronization issue between Material UI SelectField component and state is observed in React/Redux setup

My issue involves the LayoutSelector component which contains a drop-down form that updates the state.plate.layout. The state is passed as a prop to the component. On my local machine, the selected menu item accurately reflects the state changes - when a n ...

javascriptformsreactjsreduxmaterial-ui

Eliminating the muted attribute does not result in the sound being restored

I am looking to implement a feature where a video loads automatically without sound, but when a user clicks a button labeled "Watch with Sound", the video restarts from the beginning and plays with sound. Below is the JavaScript code: let videoButton = do ...

javascripthtmlvideo

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

What steps should I take to optimize the performance of this code by implementing rate-limiting for its execution speed?

As I pondered the task at hand, I realized that using a sleep function might be beneficial. However, Javascript lacks a built-in sleep function. How can I tweak this process to avoid hitting a Parse rate-limit? My goal is to execute one (1) Parse.Cloud.ru ...

javascriptparsingsleep

Error: Import statement is not allowed outside a module while running on live server

//this is the Greetings.js file import React from "react"; function DisplayGreetings() { return ( <div><h1>Welcome</h1></div> ) } export default DisplayGreetings //This is the Main.js file import React,{Compone ...

javascriptreactjs

Retrieve attributes of an html element modified by AJAX request

I am currently developing a small project that involves performing CRUD operations on a MySQL table using PHP and jQuery. The table is integrated into the layout in the following manner: <?php require '../connect.php'; $sql = "SELECT id ...

javascriptphpjquerymysqlajax

The async function in Jasmine is causing issues with expectedAsync functionality

Currently conducting the following examination: it("should receive rejection", async done => { class someTest { async run(){ return this.rejectFunc(); } async rejectFunc(){ return new Promise( ...

javascriptunit-testingjasmine

Here is the process to make a GET request to an API with input parameters using JQuery and JavaScript in an Asp.net view when a particular tag

Seeking assistance in displaying the count of orders on my view using a special tag. I have written a stored procedure in SQL that returns the order count based on the input type. To showcase all types of orders, I have designed multiple boxes on my form. ...

javascriptjqueryajaxapiasp.net-core

Creating a personalized tab label in Angular Material's md-tabs

After reading the md-tab Documentation, it seems that custom md-tab-label can be created. I attempted to achieve this as follows: <md-tab-label class="my-label"> Label </md-tab-label> Here is my CSS: .my-label{ background: #40FF00; } ...

angularjstabsangular-material

Tips for exploring the array populated with references in Mongoose

Hello, I am delving into MEAN stack development for the first time. Can anyone guide me on how to perform a search in Mongoose populate array? The array contains a reference. Discussion Schema: const discussionSchema = new Schema({ user_id: { type: ...

arraysmongodbexpressmongoosemongoose-populate

How can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

javascripthtmlcss

Bringing PlayCanvas WebGL framework into a React environment

I am currently working on integrating the PlayCanvas webGL engine into React. PlayCanvas Github Since PlayCanvas operates on JS and the code remains in my index.html file, I am facing challenges in comprehending how it will interact with my React compone ...

javascriptreactjsplaycanvas

Encountering issues when attempting to establish the initial date of a react DatePicker based on the user's timezone

I am currently working on a React project and facing an issue with setting the default date of a DatePicker component to the user's timezone received from an API. Despite several attempts, I keep encountering an error whenever I try to inject the date ...

javascriptreactjsnext.js

Leveraging angular.forEach for JSON Iteration

In my app and controller, I am working on creating a "flow chart style" question and answer system. To keep track of the current question and answer, I am using variables like $scope.ActiveQuestion and an array named $scope.ActiveAnswers. I am struggling ...

javascriptarraysjsonangularjsangularjs-ng-repeat

The bind once feature in Angular 1.3 is not functioning properly

Can someone help me understand why, in this code snippet, when I type in the input text it updates both <h1> elements instead of just the second one? <h1>{{::person.name}}</h1> <h1>{{person.name}}</h1> <input type="text" ...

angularjs

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6