What is the best way to retrieve a row in ui-grid using data from a specific column?

I am currently utilizing the ui-grid feature provided by . I have been experimenting with various methods, but due to my recent introduction to Angular, I find the documentation quite perplexing.

I have implemented a custom search tag system and my goal is to highlight a specific row based on user input.

To provide a clearer understanding of my objective, I have created a plunker showcasing the desired outcome.

http://plnkr.co/edit/hSiPmhFWjHqFWpru6y13

Upon entering a name in the input field that matches any entry in the table under the First Name column, that particular row should be identified and its background color changed to red.

javascriptangularjsangular-ui-grid

Answer №1

To start, it is important to establish a watcher for your property or utilize the ng-change directive as shown in my solution below:

<input data-ng-change="applyFilter()" data-ng-model="filterValue">

Within the applyFilter function, you should implement the filtering logic for your data:

$scope.filteredData = []; // Your data array here
$scope.applyFilter = function () {
    $scope.dataList = $filter('filter')($scope.filteredData, { $: $scope.filterValue });
};

Upon initialization, ensure that $scope.dataList is set to $scope.filteredData.

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

No assets detected in sails.js

Recently, I began a new sails project using 'sails new project --linker'. Initially, everything was functioning correctly but today I encountered a problem. Every time I start the server with 'sails lift', I now receive a 404 error for ...

javascriptnode.jsgruntjssails.js

Retrieving selected item values in Angular 2 using ng2-completer

Recently, I decided to experiment with a new autocompleter tool that is unfamiliar to me: https://github.com/oferh/ng2-completer. I successfully imported it and it seems to be functioning properly. My current goal is to retrieve the values of the selecte ...

javascriptarraysangulartypescript

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascriptcssangularjsangular-ui-bootstrapcss-animations

"By simply pressing the back button, Material UI Table effortlessly expands the row limit to accommodate

After creating a Material UI table and implementing Pagination, I noticed that the row limit increases automatically when clicking the back button. Even after consulting the Material UI docs, it seems like others are facing the same issue. Can anyone provi ...

javascriptreactjsmaterial-ui

Tips for revealing a hidden HTML tag

I am currently trying to validate the content within #textd to ensure it is not empty and contains more than 150 characters. If it meets these conditions, I need to transfer the content to another webpage; otherwise, display an error message based on the c ...

javascriptjqueryhtml

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

The MeshBasicMaterial in THREE.js successfully renders, while the MeshLambertMaterial does not produce the desired outcome

In my current project, I've been working on creating a randomized sheet composed of arrays containing x, y, and z coordinates to draw triangles between points. You can see the outcome by clicking on this screenshot. Initially, I utilized MeshBasicMat ...

javascriptthree.js

Guide to implementing the Office 365 Javascript API in your application

Looking to integrate an Office 365 Excel sheet with the necessary toolbars into my web-based application, similar to this setup (including the Excel Online toolbar above). Link Here Unsure of the process - is there a way to implement tables and toolbars ...

javascriptexceloffice365-apps

Issue with Material-UI tab when using a datatable within it's content

I implemented the Simple Tabs feature from Material-UI with a Tab containing a Datatable using React-Data_Table. However, I noticed that this particular tab is not responsive like the others when the table is full. Empty Full Here's a snippet of th ...

javascriptresponsive-designmaterial-ui

What is the best way to duplicate a value and save it in an array?

I have a calendar and I want to be able to copy the selected day's value and store it in an array. Then, if another day is clicked, I would like to add the current day's value along with the previous day's value to the array. Users should be ...

javascriptreactjsarrays

Having Trouble Using Fetch API with ASP.NET Core 2 Controllers that Require Authorization

I have the following code on the client side: fetch("/music/index", { headers: { "Content-Type": "application/json" } }) .then(response => { if (!response.ok) { throw response; } return response.json(); }) ...

javascriptc#jqueryasp.net-coreasp.net-core-2.0

What is the best way to define 'this' context and reference an instance of an Angular 6 component?

I have successfully created a demo featuring an Earth globe using D3 and JS. Now, I am exploring the process of transforming it into an Angular 6 component. Below is the full demo without Angular: import * as d3 from 'd3v4'; import { Component ...

javascriptangularthisthis-pointer

Verify the definition of the checkbox

I'm attempting to determine whether a checkbox is defined and unchecked. When the page loads, my checkbox is disabled and I receive an error indicating that it is undefined. I attempted to create a condition to prevent the error but was unsuccessful. ...

javascriptangularjs

Javascript Leap Year Determination using nested if-else statements

I am facing an issue with the nested if statement where all conditions have been provided. Some leap years like 2016 and 2020 are not being recognized as Leap years even though they should be. Can someone please assist me in fixing this error? var y = p ...

javascriptif-statementnested-if

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

I am currently in the process of creating my very first jQuery plugin, and I have encountered a challenge when attempting to extend the plugin to support HTML5 data attributes. The idea is for a user to be able to initialize and adjust settings simply by u ...

javascriptjqueryhtmlscroll

Unable to dynamically translate special characters using npm latinize

When translating German special characters to English using latinize, the module only works when strings are passed within single or double quotes. However, it does not work when storing them inside a variable. import latinize from 'latinize'; ...

javascriptnpmspecial-characters

Tips on how to connect the scope from a controller to a custom directive in Angular

Currently, I am delving into the world of Angular and finding myself immersed in directive lessons. However, as I engage in some practice exercises, I have encountered a stumbling block. Specifically, I have developed a custom directive with the intention ...

javascriptangularjs

Display loading spinners for multiple ajax requests

At the moment, I am displaying spinners using the ajax setup method call: (function() { $.ajaxSetup({ beforeSend: showLoader, complete: hideLoader, error: hideLoader }); })(); While this setup is functioning properly, the ...

javascriptjqueryajax

Define JSON as writeable: 'Error not caught'

I'm facing an issue with a read/write error in my JavaScript code because the JSON file seems to be set as read-only ('Uncaught TypeError: Cannot assign to read only property'). How can I change it to writable? Should I make changes in the J ...

javascriptjsonobjectwritable

React Application Issue 'Error: React is not defined'

I've been working on developing an app using react, but for some reason, it's not functioning properly and I'm struggling to pinpoint the issue. The code compiles without errors using babelify, however, it throws an exception during executio ...

javascriptreactjsnpmgruntjsbrowserify