Convert a string to HTML using AngularJs

Snippet:

<tr ng-repeat="x in orderCsList">
  <td class="ctn"><input type="checkbox" ng-model="x.checked"></td>
  <td class="ctn">{{ x.wdate }}</td>
  <td class="text-left">{{ x.wid }}</td>
  <td class="text-left">{{ x.content }}</td>
  <td class="text-left">{{ x.suc_yn }}</td>
</tr>

I have a property(x.contents) with the value TEST<br>TEST. How can I convert it to HTML?

Present outcome:

TEST`<br>`TEST

Desired outcome:

TEST
TEST

Answer №2

Try using the ngBindHtml directive.

Below is a code snippet that demonstrates how to use it:

(function() {
 "use strict";
 angular.module('app', ['ngSanitize'])
   .controller('mainCtrl', function() {
     var vm = this;
     
     vm.parsed = 'TEST<br>TEST';
   });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
  <strong>Before parse:</strong><br><span ng-bind="main.parsed"></span>
  <hr>
  <strong>After parse:</strong><br><span ng-bind-html="main.parsed"></span>
</body>
</html>

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

Utilizing Redux dispatch to uncheck checkboxes within renderOption with Material UI Autocomplete

In the Autocomplete component, I have a checkbox that is rendered in the renderOptions prop. By using the onChange function event: object, value: T | T[], reason: string), I can retrieve the list of selected options. The value parameter will provide me w ...

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

Creating a gradual appearance effect through ng-repeat when adding elements to the beginning of a list

I have come across tutorials that demonstrate how to fade in elements when adding them to the bottom of a page, but I am looking for a way to achieve the same effect when adding elements to the top. ...

I need the language chosen using Lingui's Language Switcher (i18n) to persist throughout the app, even after a refresh

I have been experimenting with Lingui for internationalization (i18n) in my app. I followed the documentation and tutorial to create a language switcher, but I am unsure how to set it up so that the selected language persists throughout the app even after ...

Is it possible to adjust the size variable in Angular controllers/services using Bootstrap?

Is there a way to dynamically adjust functionality in Angular services/controllers based on the current Bootstrap3 breakpoint (xs, sm, md, lg)? For example, opening a Kendo-UI window on desktop, but using a simple 100% width window on mobile. I'm loo ...

The curious case of jQuery.parseJSON() failing to decode a seemingly valid Json string on a Windows-based server

I am currently running a WordPress JavaScript function code on a Linux server that also includes a PHP function called "get_form_data". jQuery.ajax({ type: "POST", url: MyAjax.ajaxurl, data: {action: "get_fo ...

Displaying error messages on a form that uses ng-repeat in Angular

I am trying to dynamically generate input fields using ng repeat in Angular, but I am encountering an issue where error messages only appear on the last element. How can I make these error messages apply to each individual element? <form name="setPla ...

Unhandled error: 'this' is not defined within the subclass

My code snippet is causing an issue when run in Node v4.2.4: "use strict"; class Node { constructor() { } } class Person extends Node { constructor() { } } const fred = new Person(); Upon running the code, I encounter the following error mes ...

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

When working with ng-repeat in Angular 1 to display the index, this code is used: <div ng-repeat="car in cars"> <ul> <li>Index: {{$index+1}}</li> <li>Car Name:{{car.name}}</li> </ul> </div> However, w ...

React.js Component Composition Problem

I am attempting to replicate the following straightforward HTML code within a React environment: Traditional HTML <div> Hello <div>child</div> <div>child</div> <div>child</div> </div> React(working ...

What steps can be taken to avoid including empty tasks in React code?

Is there a way to prevent my application from adding empty tasks? Below is the code snippet for adding a new task to an array. How can I implement a condition to block the addition of empty tasks? This application follows Mozilla's guidelines for a R ...

Ways to eliminate the worldwide model in SAPUI5

I've been attempting to break down the global model without success. I have a filter button that's set up like this: navToSecond : function (oEvent){ var oObject = this.getView().byId("inp").getValue(); sap.ui.getCore().setModel( ...

Creating a nested datatable from a JSON array object response is a valuable skill to have in

My API response is in JSON format with nested arrays. I am trying to parse it into a nested datatable, but I can't seem to get it working. Can someone please point out where I went wrong? The JSON data contains passenger information and each passenger ...

Transitioning from one bootstrap modal to another in quick succession may lead to unexpected scrolling problems

I'm facing a challenge with two modals where scrolling behavior becomes problematic when transitioning from one to the other. Instead of scrolling within the modal itself, the content behind it is scrolled instead. In order to address this issue, I im ...

Why is it that my JQuery sliders appear perfectly fine when viewed locally, but fail to show up when accessed on

I'm facing an issue with two JQuery sliders on my page. The local version works fine, but when I upload it to my web host, only one slider functions correctly. I need both of them to work as intended. Any insights on how to resolve this problem? See ...

What could be causing the readTextFile function to return undefined?

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; function readFile(file) { let fileContents = new XMLHttpRequest(); fileContents.open("GET", file, false); fileContents.onreadystatechange = function () { ...

Loading google maps markers dynamically with ajax requests

I'm in the process of plotting around 120 markers on a Google Map by utilizing an ajax populated array containing google.maps.LatLng objects Here is my script <script type ="text/javascript"> $.ajaxSetup({ cache: false }); ...

What is the best way to extract data from a series of nested JSON objects and insert it into a text field for editing?

I am facing a challenge with appending a group of nested JSON objects to a text field without hard coding multiple fields. Although I have used the .map functionality before, I am struggling to make it work in this specific scenario. const [questions, setQ ...

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so. I initially looked into using Intersection Observer based on a popular answer found here: ...

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

My goal is to set up an automatic email sending system that, upon receiving details like name and email, will send a confirmation email to the provided email address with the message "subscribed." I've been working on this task for about 7 hours strai ...