Steps to refine the NG-Grid by dropdown selections

The drop down menu on my website is populated from the Nggrid Column. This dropdown acts as a separate control.

My goal is to filter the NG-grid based on the selected value from the drop down menu. Can you provide guidance on how to achieve this?

Answer №1

One way to enhance your select functionality is by incorporating an ng-change directive:

select(ng-model="search", ng-options="data in datas", ng-change='myfilter()')

To implement this feature in your controller, follow these steps:

$scope.myfilter = function() {
   $scope.datas = $filter('filter')($scope.datas, {data.YourField: $scope.search});
    // or:
    // $scope.datas = $scope.datas.filter(function(data) {
    //    return data.YourField == search || data.YourOther == search;
    // }
};

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

Utilize JSX to dynamically insert HTML tags onto a webpage

I am trying to achieve a specific task in JSX, where I want to identify all strings enclosed within delimiters :; and wrap them with HTML Mark tags to highlight them. However, the current implementation is not rendering the tags as expected. Is there a sol ...

Store picture documents in web software program, java

I have a web application where I need to allow "client side users" to upload a large number of image files, and "customer side users" should be able to view a grid layout of the uploaded images. All image files should be accessible for uploading, viewing, ...

What is causing setTimeout to not function as intended?

I'm having some trouble moving a <div id="box"> whenever my mouse hovers over it. Currently, the element only moves when I trigger the mouseover event on the div itself instead of when my mouse is actually hovering over it. document.getElements ...

Ways to insert data into a JavaScript array using PHP

I am trying to create a form that adds products to the cart: <form method="post" > <input type="hidden" value="<?php echo $product['id']?>" id="productId" name="productId"> <input type="hidden" value="<?php echo $ ...

Storing unique information in DOM elements with jQuery just once

By utilizing jQuery, I am programming dynamic controls based on the query string parameter. These controls are draggable and can be organized neatly after being dropped. Following the drag/drop event, I aim to update the control's position and state t ...

Having trouble retrieving JSON array in PHP

I'm facing a challenge accessing data from PHP that's coming from JSON in JavaScript. I utilize local storage to store some temporary information: var tbRomaneio = localStorage.getItem("tbRomaneio");// Retrieves stored data tbRomaneio = JSON.pa ...

``Is there a way to redirect users when they click outside the modal-content in Bootstrap

I have a modal on my website that currently redirects to the homepage when the close button is clicked. However, I also want it to redirect to the homepage when clicking outside of the bootstrap modal, specifically targeting the ".modal-content" class. I ...

Verifying the emptiness of a PHP array using JavaScript

Hey there, I've got a form set up for users to input one or more books into a database. If a user forgets to enter the title when adding just one book, a JavaScript alert pops up reminding them to fill it in. However, if they have two or more books an ...

The counterpart to node's http-proxy in the .NET framework

I am in search of a .NET solution that can serve as a proxy for API requests between a client application and a rest API. I discovered a potential solution that utilizes a node.js back end, which is the node http-proxy method demonstrated in this example. ...

An error was encountered: SyntaxError - An unexpected token '!' was found

I am having trouble creating a react cluster map. I encountered a SyntaxError, and I'm not sure what went wrong. Initially, my map was working fine, but after using the use-supercluster npm package, it started showing an Uncaught SyntaxError: Unexpect ...

Jquery ajax failing to fetch data

There is a problem with Ajax not returning any data. http://jsfiddle.net/w67C4/ $.ajax({ dataType:'jsonp', url: url, async:false, success: function(data){ getUsername = data.user.id; }, }); The data being returned i ...

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

Receiving a 500 (Internal Server Error) in AngularJS when making a $http POST request

Being a novice in the world of Ionic and Angular, I am currently working on a project using the Ionic framework with Angular.js. My goal is to make a WebApi call using the $http post method. I have referred to the solution provided in this ionic-proxy-exam ...

What is the best way to implement a Navbar link in React.js?

I am currently working on developing a website using Reactjs. I have successfully created a Navbar with two links - Home and Contact. However, when I click on the Contact link, although the URL changes accordingly, the page itself does not update. I have s ...

Function in Javascript that can pull data for multiple users

I am facing an issue with my function that retrieves my friends' ids. It works for all friend ids but I can't seem to make it work for just one friend's id. I believe I need to implement a loop to fetch all friend ids. Could you provide ass ...

When using an HTML Select element with options loaded through Ajax, the desired item for selection is not being automatically selected

This is a strange situation. Collaborating with others and using sample code, I have created a routine that utilizes AJAX to pass a value from one select to a PHP file. The PHP file then generates a second select with options, each option designed to check ...

What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?

Currently, I have a controller making use of http.get, http.push and http.post methods within my AngularJS app. During my learning journey with AngularJS, I've discovered that it's more efficient to place http.get calls in service files. While I ...

Generating objects dynamically using an array of paths in dot notation

Is it possible to dynamically generate an object with an array of strings in dot notation? The idea is to construct a JSON object from a CSV file, filter the properties, and create a new JSON object. Let's say we want to pass something like this... ...

Angular ngClick on a rectangle within an SVG element

Need to trigger angular click functions on rects in an svg. <rect data-ng-click="scrollToAnchor('siteHeader')" fill="#010101" width="501" height="81"></rect> Here's the function: $scope.scrollToAnchor = function(anchor) { $a ...

During the deployment of a ReactJS app, webpack encounters difficulty resolving folders

While developing my ReactJS app, everything ran smoothly on localhost. However, I encountered some serious issues when I tried to deploy the app to a hosting service. In my project, I have a ./reducers folder which houses all of my reducers. Here is the s ...