Display stylized portion of text within JavaScript object

I am struggling with formatting a specific part of the text in my Ionic HTML list of cards. The content is populated by objects defined in my JS controller as shown below:

<div class="list">
<div class="card" ng-repeat="item in eventsDay19">
    <div class="item item-divider">
        <b>{{item.eventHour}}</b> - <span style="font-style: italic;font-weight: bold;">{{item.eventTitle}}</span>
    </div>
    <div class="item item-text-wrap">
        {{item.eventPlace}}<br />{{item.eventText}}
    </div>
</div>
</div>

The challenge I'm facing is trying to format a specific substring within the 'eventText' member using bold letters ('D.XXX-XXXX'). Despite various attempts, including adding CSS and HTML format tags around the substring or using the bold() JavaScript function, I have not been successful.

It seems that directly applying formatting tags on the JS string does not translate to HTML code. If anyone could shed some light on the underlying mechanism of how JavaScript and HTML interact in this scenario, it would be greatly appreciated.

Thank you in advance,

Jose

javascriptangularjsionic-framework

Answer №1

To display HTML content in AngularJS, utilize the ngBindHtml directive

Include the ngSanitize module by injecting it into your Angular module:

angular.module('moduleName', ['ngSanitize'];

For example, you can define a string like this:

var str = "Aaa <strong>D.XXX-XXXX</strong>";

HTML View:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<span ng-bind-html="str"></span>

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

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

javascriptjquerycsscookiesbackground

Is it advisable to include the `engine` attribute in the packages.json file for a web browser library project?

When creating a JS library project meant for browser use, do I need to include the engines field in the packages.json file? ...

javascriptnpm

Tips for selecting specific types from a list using generic types in TypeScript

Can anyone assist me in creating a function that retrieves all instances of a specified type from a list of candidates, each of which is derived from a shared parent class? For example, I attempted the following code: class A { p ...

javascripttypescript

"Directional Light in three.js that Tracks Alongside the Camera

I'm encountering an issue with Three.js and lighting that follows a camera. I am utilizing orbit control for mouse movement. In release 66, the following code used to function properly: light = new THREE.DirectionalLight( 0xffffff, 1 ); lig ...

javascriptthree.js

Explore various Lists with unique headings by applying filters or conducting searches

I am looking for a script that can filter and search various lists with the same class. The script should display the headings of the lists if there is at least one matching search name. If there are no matching search names, the heading of the list should ...

javascriptjquery

Exploring Fundamental Inquiries within Firebase and AngularJS

I have a Firebase database structured like this: { "jobs" : { "-Jnbc60FQGiKUubz0u6e" : { "Description" : "There is a leaky faucet in the sink.", "uid" : "simplelogin:4" }, "-Jnbc60FQGiKUubz0u6e" : { "Description" : "The mic ...

angularjsfirebasefirebasesimplelogin

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

javascriptangulartypescriptrxjs

Start by setting up the Select box to include a loading option, which will then be removed once the

I am facing an issue with a select box in my form that loads data using a JSON request in AngularJS. To handle the delay in loading the data, I added a temporary option: <option value="">Loading...</option> However, once my model is loaded, t ...

angularjs

Utilize getElementsByClassName to dynamically alter the appearance of specific elements upon triggering an event

I'm attempting to utilize onmouseover="document.getElementsByClassName().style.background='color'" in order to switch the color of all divs with a specified classname to a different color when hovering over another element on the page. ...

javascriptcssonmouseovergetelementsbyclassname

Is there a way to preserve EXIF data when converting an image to base64?

I am currently facing an issue with reading a local image that has been created with a different exif.Orientation based on the degree of rotation. const exifData = piexif.load(data.toString("binary")); // Assign the desired orientation value ...

javascriptnode.jsexifpiexif

Flask and Ajax make it easy to work with multiple datatables that are connected to

Currently, I am working with 2 datatables in my project. The first one is populated using the following code snippet: {% block scripts %} <script> $(document).ready(function () { $('#data').DataTable({ ajax: '/api/dat ...

javascriptjqueryajaxflaskjinja2

Italian calendar conversion for the react-multi-date-picker library

I recently integrated the react-multi-date-picker into my project, utilizing the multiple mode feature. However, I encountered an issue when trying to display the Italian calendar based on the language setting. Despite using locale="it", the calendar was n ...

javascriptreactjsnpm

Using AngularJS to send the $http response back to the calling object

Is there a way to pass the response value to the parent object, specifically the invoker of an http service call in AngularJS? I have a BaseModel that performs the GET request as shown below. The goal is for the basemodel object instance to hold the respon ...

javascriptangularjsangular-promise

Vue component input form not providing expected result

Here is the code snippet for my "ecedata" component with an input field: <template> <div class="col-l-4"> <p style="text-align: center">Data/day (GB)</p> <div class="form-input-set" style="background: white"& ...

javascriptvue.jsvuejs2vue-component

Basic HTTP request to retrieve user's geographical location

I've been working on a project that involves getting the user's location and sending it to the server for API calls. I'm able to retrieve the current location of the user, but for some reason, it's not posting to the server as expected. ...

javascriptangularexpress

Utilizing jQuery to toggle containers based on link clicks

Hello everyone, I'm having trouble getting this code to work. I have a set of 4 links and I need to display one div container for 3 of them, and another for the remaining 1 link, switching back and forth. Any suggestions? <div class="content activ ...

javascriptjquery

Tips for sending information to a modal window

I need to transfer the userName from a selected user in a list of userNames that a logged-in user clicks on to a twitter bootstrap modal. I am working with grails and angularjs, where data is populated using angularjs. Set-Up The view page in my grails a ...

javascripttwitter-bootstrapgrailsangularjs

validate the existence of the username upon submission of the form

Here is some code that I have written. .js $(document).ready(function() { $("#username").focusout(function() { $.ajax({ type:'post', url:site_url()+'/client/checkUserName', data:{&apos ...

phpjavascriptajax

Guide to returning data in response to a GET request in ASP.NET MVC using ActionResult

I am currently facing a challenge with creating a method to handle an AJAX GET request from JavaScript. Upon debugging, I have confirmed that the GET response method in the backend is retrieving the correct data. However, I am uncertain about how to effect ...

javascriptc#asp.net

Determining the optimal number of rows and columns based on an integer value

Here's a brain teaser for you: /** * Let's figure out the optimal number of rows and columns for your garden to be as square as possible, based on the number of seeds you have. * * @param {number} seedCount - The total number of seeds in you ...

javascript