Tips for processing bound data in AngularJS

Is it possible to manipulate data that is bound with AngularJS after the fact?

I am creating a basic search page and have generated the results using this code:

...
<div class="row" ng-repeat="document in sc.searchResult.content">
    <blockquote>
        {{document.content}}
    </blockquote>
</div>
...

The issue I'm facing is that I need to highlight specific words in each result (similar to Google's search results)

https://i.sstatic.net/lItPM.png

How can I achieve this effect?

Answer №1

app.js

$scope.data.content = someSearchData.replace(/<searchQuery>/g, '<strong>' + <searchQuery> + '</strong>')

searchQuery is the specific query that needs to be altered. Utilize RegExp() for creating a regular expression.

view

<div ng-bind-html="data.content"></div>

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

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

Enable the use of empty spaces in ag-grid filter bars

I'm experiencing an issue with the ag grid filter. It seems to be disregarding white spaces. Is there a way to configure the grid to recognize blank spaces in the filter? Any suggestions for resolving this issue? Where can I find the option to accept ...

Android 9 encounters an error when processing a POST request in a hybrid app developed with JavaScript, Cordova, and PhoneGap

I am facing an issue with AJAX in my Android app (JS / CORDOVA). The code I am using is as follows: $.post("http://mydomain.com.br/getInfos.php" { id: id }, function(json) { if (json == "success") { alert("Success!"); } else { alert("E ...

Having trouble getting the ionic lib update command line to work properly?

My current situation: $ionic lib update you sure you want to replace D:\Projects\cda-volunteer\www\lib\ionic with an updated version of Ionic? (yes/no): yes Unable to receive version data Here's my ionic info: Cordova ...

Firebase is not updating the number

Having just started with Firebase, I have been following all the guidelines for web Firebase auth. I have successfully managed to login, log out, and update all data except for the phone number. Despite receiving a success message in the console, my phone ...

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

The nodes.attr() function is invalid within the D3 Force Layout Tick Fn

I'm currently experimenting with the D3 Force Layout, and I've hit a roadblock when it comes to adding elements and restarting the calculation. Every time I try, I keep encountering this error: Uncaught TypeError: network.nodes.attr is not a fun ...

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

Choosing a root element in a hierarchy without affecting the chosen style of a child

I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...

What is the most efficient way to switch perspectives?

I'm currently utilizing storybook to simulate various pages of my application. My concept involves encapsulating storybook within one context for mock data, and then during live application execution, switching to a different context where data is fet ...

Interactive form fields and showcasing data

Hi there, I'm not very familiar with jQuery but I need some help with the following code: jQuery(function($) { $('#precoInserido').bind('keydown keyup keypress', function() { $('#precoVer').html(this.value || "??") ...

Customizing date colors in JavaScript: A step-by-step guide

var active_dates1 = ["2017-04-02 00:00:00","2014-04-03 00:00:00","2014-04-01 00:00:00"]; $('.datePick', this.$el).datepicker( beforeShowDay: function (date) { for(let date1 of active_dates1){ if (date.getTime( ...

React Table component displaying data fetched from API is encountering errors when trying to access properties of null

While using React-Material-Table, I encountered an issue where some values are null, resulting in the error message "Uncaught TypeError: Cannot read properties of null (reading 'name')". 1. How can I address this problem? 2. Is there a way to se ...

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

Managing promises - updating database entry if it already exists

I'm encountering a new challenge with Promises. Objective: Update the database entry only if P_KEY exists. The current database is accessible through a module that has both get and put methods for the database, each returning a Promise. Approach: ...

What is the best way to trigger a localstorage change event using Vue.js?

I'm currently facing an issue with my Vue app related to updating user information stored in localStorage. I've implemented a solution using websockets in App.vue within the mounted function, as shown below: window.Echo.channel("user." ...

What is the most effective method for exchanging variables between programs or threads?

I currently have a program that executes an algorithm processing real-time data. Once per hour, the algorithm's parameters are optimized based on new historical data. Currently, this optimization process is running in a single thread, pausing the rea ...

Is there a maximum number of iterations allowed when looping through arrays in Jade/Express?

I'm currently facing an issue while trying to navigate through a nested array structure in my Jade code. It seems like I've reached a limitation. div().slidePreview ul each slide in slides div each section in slide ...

Determine the occurrences of each element in a given array and save them as key-value pairs

Is there a way to efficiently convert an array of elements into an object with key value pairs representing element frequencies? For example, given an array: var array = ['a','a','a','b','b','c&ap ...

Explain the functioning of the Node.js event loop and its ability to manage numerous requests simultaneously

Recently, I delved into testing asynchronous code in node.js. From what I understand, when there is an asynchronous operation taking place, Node.js should be able to handle new requests. Below is a snippet of code I wrote using express and axios: app.get(& ...