Modify the text highlighted in bold within the AngularJS application

In my angular.js application, I have a table that displays elements. The name of these elements sometimes needs to be displayed in bold by adding <b> and </b> tags. However, instead of rendering the name as HTML code, it is showing up as a string.

I want to change all instances of text between the <b> and </b> tags on the page to be displayed in bold format.

This is what I have tried:

var pattern = new RegExp(nameFilter, "g");
e.name = e.name.replace(pattern, '<span class="highlighted">' + nameFilter + '</span>');

Despite this attempt, the text still appears as a string rather than in bold format.

Any suggestions on how to display the text in bold correctly?

javascriptangularjs

Answer №1

Here is the implementation of $sce.trustAsHtml in response to your request. Feel free to check out the live example on this plunker link.

Template:

<tr ng-repeat="emp in empList">
    <td><span ng-bind-html="emp.name | trustAsHtml"></span></td>
    <td>{{emp.dept}}</td>
</tr>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.empList = [
    { name: '<b>Test 1</b>', dept: 'Finance'},
    { name: '<b>Test 2</b>', dept: 'Development'},
    { name: '<b>Test 3</b>', dept: 'Testing'},
    { name: '<b>Test 4</b>', dept: 'DBA'}
  ];
});

app.filter('trustAsHtml', ['$sce', function($sce){
  return $sce.trustAsHtml;
}]);

Note: Remember to include 'ngSanitize' module into your main application, just like demonstrated in the provided plunker.

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

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

javascripthtml

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...

javascripthtmlangulartypescriptfuse

Using Mongoose, Express, and Node.js to send a server variable to an HTML page

I've encountered an issue while attempting to transfer a variable from my server.js file to HTML. Despite successfully passing the variable to another EJS file on a different route, I can't seem to display it within this specific EJS file. Strang ...

javascriptnode.jsmongodbexpressmongoose

What is the proper way to incorporate an if statement within a return statement in React components?

I have encountered an issue while trying to map objects in my array. Everything works perfectly when mapping all the objects, but it becomes problematic when I attempt to map just one object from the array. Here is the code for my array: const slides = [ ...

javascriptreactjs

Set up the configuration for express to access an external API through proxy.conf.json while in production mode

I am currently managing two applications on Heroku, one being myserverapi (built with Spring Boot) and the other being a client-side Angular app named client. The server is hosted at myserver.heroku.com while the client resides at myclient.heroku.com. At t ...

javascriptangularexpressheroku

How can we implement intricate looping mechanisms in hogan js?

Currently, I am in the process of familiarizing myself with expressjs. In my journey to learn this technology, I have encountered a controller that performs queries on a database and returns a JSON object with certain key-value pairs. An example of such an ...

javascriptjsonnode.jsexpresshogan.js

Updating the object in router.get and res.render in Node.js and Express after loading

When loading the page, I encounter an error with req.body.firstname.length inside router.use. The error states: TypeError: Cannot read property 'length' of undefined The issue arises because the default value is undefined for the input form. ...

javascriptajaxnode.jsexpress

Tips for eliminating duplicate values from an array of objects in JavaScript

I am working with an array of objects where my goal is to remove duplicate values from the values array. I would like the final result to be [{name:'test1', values:['35,5', '35,2','35,3']}, {name:'test2', v ...

javascriptobject

Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model. I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object ...

javascriptcsssvgthree.js

Using `ngRepeat` on a different array of values for repetition

Working with AngularJS. Here is an example of a JSON object: "skills": { "Charisma": {}, "Dexterity": { "Sk3": [ [ true, true, true, true, false ], 44 ] }, ... And the corresponding HTML: <div class="pan ...

javascripthtmlangularjs

JavaScript: Extending a class with an invalid or null value is not permitted

Trying my hand at constructing a page object for login testing with WebdriverIO. Encountering the error ERROR: Class extends value #<Page> is not a function or null on line 3 of login.page.js. No clue what mistake I'm making... Is there a wron ...

javascriptselenium-webdriverecmascript-6webdriver-io

Apply a jQuery class to the element if the current date matches today's date

I've been struggling to find the correct solution online for adding a class if today's date matches an event in my list. For example, I have a list of events and I want to highlight the event date if it is today. Here is the current output: 12 ...

javascriptphpjquerydate

Steps to retrieve the search box input value and submit it in an AngularJs component using the Enter key

I'm facing an issue where I am trying to fetch the search list using speciesName from a table. However, when I attempt to retrieve the data by pressing the enter key, it is returning an error stating that the input data is undefined. Is there a way ...

angularjstypescriptkey-value

When attempting to utilize VueJs v-bind:type on an input element, it appears to be ineffective when the type property name is

Code: <!DOCTYPE html> <html> <head> <title>Creating a Vue app</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570021e061e0100">[ ...

javascriptvue.jsvuejs2vue-component

Adjust the width of a div based on its height dimension

I have a div called #slideshow that contains images with a 2:1 aspect ratio. To set the height of the image using jQuery, I use the following function: Keep in mind that the Slideshow Div is always 100% wide in relation to the browser window. If the use ...

javascriptjquerycss

Looking to add some color to the tags within an XML document that is being shown in a textarea?

Currently, I am attempting to add color to the tags within an XML string that is being displayed in a textarea on an HTML page. For example, let's say I have an XML string stored in a variable called 'xmldata'. The HTML textarea tag looks ...

javascript

Execute a virtual mouse click on a button without the need for a physical click

I'm facing an issue with buttons that have a canvas animation triggered by the react library react-ink. The problem is that this animation only works when the button is clicked using the mouse cursor. However, in my application, I have assigned hotkey ...

javascriptreactjs

Deactivate "When the viewModel attribute holds the phrase 'some text'"

I came across this answer on Stack Overflow regarding checking for a value in Knockout, but it seems to be outdated. I am attempting to achieve something like this: <li> <span data-bind="text: Subject"></span> <!-- ko if: Subjec ...

javascriptknockout.js

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

javascriptjqueryjquery-uikendo-uijquery-ajaxq

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

javascriptjqueryarraystypescriptspfx