Using AngularJS to inject a variable into the standard filter

Question

Using AngularJS to inject a variable into the standard filter

Currently, I am attempting to develop a custom filter that mimics the functionality of the standard Angular filter in HTML, with the distinction that it accepts a variable as input rather than a fixed value.

For instance, within my html document, you may come across something similar to this:

<tr ng-repeat = "item in Items | filter:{function:'1300'}"> 
  <td>[[item.name]]</td>
</tr>

However, I aspire to have the flexibility to provide a variable instead of '1300', whose actual value can be determined when the user interacts with a button (which corresponds to a specific value).

I've attempted to replicate the built-in filter function by creating a filter.js file and invoking it within my controller without success.

If anyone could offer assistance, it would be greatly appreciated!

javascript angularjs

Answer 1

Answer №1

If you're looking to implement this functionality, check out this jsBin example:

<tr ng-repeat = "item in Items | filter:{function:theFilter}"> 
  <td>{{item.name}}</td>
</tr>

Your button setup could be like the following:

<button ng-click="setFilter(1300)">1300</button>
<button ng-click="setFilter(1400)">1400</button>
<button ng-click="setFilter(1200)">1200</button>

Here's how your controller method would look:

$scope.setFilter = function(filter) {
    $scope.theFilter = filter;
}

Answer 2

If you're looking to implement this functionality, check out this jsBin example:

<tr ng-repeat = "item in Items | filter:{function:theFilter}"> 
  <td>{{item.name}}</td>
</tr>

Your button setup could be like the following:

<button ng-click="setFilter(1300)">1300</button>
<button ng-click="setFilter(1400)">1400</button>
<button ng-click="setFilter(1200)">1200</button>

Here's how your controller method would look:

$scope.setFilter = function(filter) {
    $scope.theFilter = filter;
}

Using AngularJS to inject a variable into the standard filter

Answer №1

Similar questions

Reversing the order of input-group-addon and input in bootstrap on mobile devices

Organizing and recycling React styled-components and native elements

Keep an ear out for events coming from the identical Socket.IO socket

template for displaying data in Vue.js using props

Difficulty encountered when trying to update intricate model using Angular UI modal

What could be causing the malfunction of removeEventListener in my Nuxt application?

Animation is not applied to Bootstrap Collapse on a row within a table

Passing default props to a component in React that includes a function as one of the

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

Achieve a customized glow effect by blending FragColor with UnrealBloom in ThreeJS using GLSL

Passing a table value to a PHP script using JQuery on click event

JavaScript: Identify the variable that has been updated

Error in ThreeJS: The constructor THREE.FaceNormalsHelper is not defined

Obtain selected values from another view

Conditional Matching with Javascript Regular Expressions

Transferring information and storing it in a textbox

Converting and storing Canvas data as a blob, and then saving the blob as

Omit specific TagNames from the selection

Transferring data between nested IFrames and triggering a page refresh

Creating a function that writes to a file by utilizing the data input from