Using Angular JS to Implement Multi-filtering for Lists

Having trouble with the filter function in Angular JS when trying to filter a list using different links. I've been struggling to get it right even after trying some examples. Can anyone provide guidance on how to correctly filter the list?

HTML

<tr ng-repeat="rubric in examplerevisions | filter:myFilter" class="{{rubric.translationProposal.validations[0].class}}">
    <td></td>
    <td>{{rubric.translationProposal.validations[0].createdBy}}</td>
    <td>{{rubric.translationProposal.validations[0].createdOn | date:'dd/MM/yyyy'}}</td>
    <td>{{rubric.translationProposal.validations[0].action}}</td>
    <td>{{rubric.action}}</td>
</tr>

<a href="" ng-click="myFilter = {action: 1}">OK</a>
<a href="" ng-click="myFilter = {action: 2}">New Proposal</a>
<a href="" ng-click="myFilter = {action: 3}">Null</a>

JS

In $scope.examplerevisions, all rows are contained.

JSON EXAMPLE ARRAY

{
"1":{
    "id":1,
    "action":1,
    "translationProposal":{
        "id":1,
        "status":"ACCEPTED",
        "createdOn":1393946608751,
        "createdBy":12,
        "validations":[
            {
                "id":0,
                "action":"ACCEPT",
                "proposedAlternative":"Alternate translation",
                "createdOn":1393946608751,
                "createdBy":12
            }
        ]
    }
}
}

Answer №1

<tr ng-repeat="rubric in exampleRevisions | filter:myFilter" class="{{rubric.translationProposal.validations[1].class}}">
<td></td>
<td>{{rubric.translationProposal.validations[1].createdBy}}</td>
    <td>{{rubric.translationProposal.validations[1].createdOn | date:'MM/dd/yyyy'}}</td>
    <td>{{rubric.translationProposal.validations[1].action}}</td>
    <td>{{rubric.action}}</td>
</tr>

<a href="" ng-click="myFilter[0].action = 1}">Approve</a>
<a href="" ng-click="myFilter[0].action = 2}">Create New Proposal</a>
<a href="" ng-click="myFilter[0].action = 3}">Unset</a>

That should work perfectly, just ensure that myFilter is the root for your object if you want to filter them by their node values.

------update----------

I don't know why I didn't notice this sooner, but filters don't really work with objects of objects - you need an array of objects instead. Check out the updated version of your plunker here: http://plnkr.co/edit/ejbZXqhwdrF1yopIaM61?p=preview

Answer №2

After reviewing the final example on the webpage: http://docs.angularjs.org/api/ng/filter/filter, I believe that the parameter should be defined as either ng-click="myFilter.action = 1" or myFilter[1].action = 1

Would it be possible for you to share a JsFiddle or a similar tool where users could experiment with this concept?

UPDATE: If implementing it directly seems challenging, creating a custom filter might be a more practical solution. Alternatively, converting the JSON data into an array can also help achieve the desired output, like in this example:

http://plnkr.co/edit/S9MvwFlpczWxqciVP72V

For those preferring to stick with the object format, check out this helpful answer: AngularJS sorting by property

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

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

Tips for preserving historical messages

Hey there, I'm a newcomer to the world of Discord API and I'm working on developing a simple bot for Discord. My current project involves archiving all messages sent in a specific channel, including edited and deleted messages. Do you have any s ...

Exploring a collection of objects housed in a json document

Currently, I'm looking to retrieve a collection of objects using JavaScript from a JSON file that resides on my website. While I could easily embed the array of objects directly into my JavaScript code, I am interested in understanding how to work wit ...

Unlocking the Controller's Secrets in Jasmine with AngularJs

I need help with writing a unit test for my AngularJs code to call variables and functions inside the controller function. For instance, I want to check if the abcCode is defined using: toBeDefined(); Could you please advise on how to load the module and ...

Concurrent programming in Node.js with the async module

Is it recommended to avoid utilizing multiple instances of an async module feature simultaneously? In my code, there are three parts that need to be executed in sequence. The structure of my code looks like this: var async = require('async'); a ...

JavaScript code that loads a copied mesh object using three.js

Currently using three.js version r59, encountering difficulties when attempting to duplicate a loaded model. The goal is to create multiple models through looping, with the plan to apply textures at a later stage. for (var i=0; i<5-1; i++){ va ...

Altering the value of a global variable through a local function in JavaScript

I have developed a straightforward piece of Java script code. I'm looking to update the value of a global variable using a local function. Whenever I trigger the value1() function, I want the output to display as "2". Is there a way I can achieve this ...

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

Make the download window appear automatically when downloading a file

How can I use JavaScript/TypeScript to prompt the browser to open the download window? My goal is to give users the ability to rename the file and select the download folder, as most downloads are saved directly in the default location. This is how I curr ...

Understanding AngularJS binding: Decoding the mystery of "<?" symbol

After spending more than 10 minutes trying to find the answer, I'm certain that others will benefit from this information as well. Can someone explain the meaning of '<?' in AngularJS databinding when used for a directive? ...

Clicking the responsive menu does not reveal the hidden overlay div as expected

Struggling with finding the correct function to open the hidden div of my responsive menu on my new website. Check out my code: https://codepen.io/anon/pen/XRJRGE <a class="page-head__menu" id="js-menu" href="#" onClick="open()">Menu< ...

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

The player remains unchanged

Hi, I am currently working on my app to update a player's age. To start off, I have added three players: const playerOne = store.dispatch(addPlayer({ firstName: 'Theo', lastName: 'Tziomakas', position: 'Goakeeper ...

Utilizing Fullcalendar Qtip to display information on mouseover rather than utilizing the eventRender

I have a challenge with integrating Qtip to the eventMousever event instead of the eventRender event in fullcalendar. The main reason for this adjustment is due to the server hosting the data being located in another country, resulting in significant late ...

Tips for retrieving the clicked word in JavaScript

Is it possible to retrieve the word that was right-clicked on along with its x, y coordinates? I attempted the following code:document.onclick=getTextOnClick; function getTextOnClick(e) { console.log(e); if (window.getSelection) { txt = wi ...

What is the best approach for dynamically appending new elements to a JSON array using PHP?

I am facing an issue with the JSON below: [{"username":"User1","password":"Password"}, {"username":"User5","password":"passWord"},] The above JSON is generated using the PHP code snippet mentioned below: <?php $username = $_POST["username"]; ?>&l ...

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

What is the best way to retrieve values from a multi-select dropdown that functions effectively with each selection made

Currently, I am facing an issue in my program where I need to extract values from a multiple select option. The challenge lies in the fact that my view is in a .hbs file and the multiple select is populated using {each}. Here is a snippet of the code: Fir ...

Testing a service with $resource using unit tests

Struggling to write a unit test for an existing service and puzzled by the unexpected data appearing in the results, leading to test failures. Let's take a look at the key components: Service Method: function createAddressType(newAddressType) { var ...

What is the best way to assign three different dates in my protractor test?

I am facing an issue with setting random dates in 3 date fields in a row using Protractor. The problem is that Protractor sets the dates too quickly and sometimes assigns invalid dates like: first data: 01/08/1990 (correct) second data: 01/09/0009 (inva ...