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

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

Following a Basic Web App video last night, I meticulously followed every step until the very end where things started to go wrong. Today, I decided to start from scratch and recreate it all. Despite weeks of coding practice, I can't seem to figure ou ...

javascripthtmlgoogle-apps-script

Incorporating an external TypeScript script into JavaScript

If I have a TypeScript file named test.ts containing the code below: private method(){ //some operations } How can I access the "method" function within a JavaScript file? ...

javascripttypescript

Tips for transferring information to a node server

Currently, I am working with Express and facing the challenge of dynamically sending data to the app.get() method. Specifically, on my index page, there is a list of topics, and upon clicking one, I need to send the name of that element as the required dat ...

javascriptnode.jsexpressejs

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

javascriptcssjquery-uiautocompleteinternet-explorer-7

The function Expo.Fingerprint.isEnrolledAsync will provide an output that includes information about fingerprint

Attempting to incorporate fingerprint authentication into my react native app. Utilized Expo SDK for this purpose. Although the Expo.Fingerprint.authenticateAsync() method claims to return a boolean, it actually returns an object when examined closely. E ...

javascriptiosreactjsreact-native

Select a random object from a document and dispatch it. A Discord bot

I'm looking to enhance my bot by adding a command that retrieves a random quote from a JSON file and displays it in chat. I've already figured out how to do this using an array, but I'm not sure how to pull the quotes from a file. EDIT: ...

javascriptnode.jsfilebotsdiscord.js

Message from Discord: Unable to access the property 'MessageEmbed' because it is undefined

Attempting to create a simple welcome message embed. Here is my main.js file without the login token: const Discord = require('discord.js'); const client = new Discord.Client(); const MessageEmbed = new Discord.MessageEmbed(); const prefix = &ap ...

javascriptdiscorddiscord.js

Obtaining an element through its id using an expression in an Angular directive

Here's a complex question that needs to be broken down. I'm trying to mimic the behavior of the native <label> for <input>. Since nesting is not an option, I use a style like this: <input type="checkbox" id="test" /> Some other ...

javascriptangularjsangularjs-directive

Persistent button positioned at the bottom of the page, remaining visible even when scrolling to the very end of the content

I am looking to add a floating button that remains in the same position relative to the content until the window is scrolled to a certain point, after which it sticks to the end of the content. In simple terms, I want the element to act as 'relative& ...

javascripthtmlcss

Saving the object returned by the useRef hook into the Redux state

I have a question. I am developing a music platform similar to Spotify using Next.js. To manage states, I am utilizing Redux Toolkit. In order to play music, I have integrated the audio element within a component that includes controls to adjust the music ...

javascriptreactjsreduxnext.js

The react component is not defined within the <Popup></Popup> tag

SOLVED: Big thanks to everyone who offered their assistance. Upon further investigation, I discovered that in the library I was using, the trigger={} functionality is specifically designed to work only with a button element. To address this issue, I took ...

javascriptreactjs

Advancing the utilization of custom Angular input fields

I've developed a unique Angular input element that utilizes a textarea as its primary input field. Is there a way for me to pass along the enter key event to the main form? ...

javascriptangular

Sending a file through an Ajax POST request to a PHP server

I am attempting to upload the HTML input file to my PHP file using a different method than the traditional synchronous HTML forms. The problem I am encountering is that it seems like I am not correctly POST'ing the input file to my PHP file because t ...

javascriptphpjqueryhtmlajax

How to incorporate the angular-qr-scanner bower component into your Meteor project

Currently, I am attempting to integrate the Angular QR Scanner into my Meteor application. It seems that the only available method for installation is through Bower, however, it appears that Meteor's support for bower has been deprecated since version ...

angularjsmeteorbower

Using jQuery to obtain the object context while inside a callback function

Suppose I have the following object defined: var myObj = function(){ this.hello = "Hello,"; } myObj.prototype.sayHello = function(){ var persons = {"Jim", "Joe", "Doe","John"}; $.each(persons, function(i, person){ console.log(this.h ...

javascriptjquery

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

I am attempting to utilize an AJAX call with the free API located at that returns a list in JSON format. My goal is to display the result on my HTML using Vue.js, but unfortunately, it doesn't seem to work as expected. This is my JavaScript code: va ...

javascriptjsonajaxvue.js

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top. ...

javascriptjquerycss

What could be causing my Wikipedia opensearch AJAX request to not return successfully?

I've been attempting various methods to no avail when trying to execute the success block. The ajax request keeps returning an error despite having the correct URL. My current error message reads "undefined". Any suggestions on alternative approaches ...

javascriptjqueryajaxwikipediawikipedia-api

My child template in Angular UI is not loading properly due to the presence of multiple views when the URL changes

After reviewing a couple of questions similar to this on various forums, I may have overlooked a crucial detail in them. Upon loading http://localhost:8000/characters/#/mages/detail/3, I am being redirected to my 'otherwise' URL: $urlRouterProvi ...

javascriptangularjsangular-ui-router