I am having trouble getting the filter functionality to work in my specific situation with AngularJS

I inserted this code snippet within my <li> tag (line 5) but it displayed as blank.

| filter: {tabs.tabId: currentTab}

To view a demo of my app, visit http://jsfiddle.net/8Ub6n/8/

This is the HTML code:

 <ul ng-repeat="friend in user">
            <li ng-repeat="relation in friend.relationship">{{relation.name}} ({{relation.points}} points)</li>
        </ul>

And here is the JavaScript code:

 $scope.user = [{
        'uId': 1,
            'name': 'Joe',
            'relationship': [{
            'uId': 2,
                'name': 'Jeremy',
                'tabs': [{
                'tabId': 1
            }],
                'tasks': [{
                'name': 'Im Jeremy Lin'
            }],
                'points': 50

        },{
            'uId': 2,
                'name': 'Michael',
                'tabs': [{
                'tabId': 1
            }],
                'tasks': [{
                'name': 'Im Jeremy Lin'
            }],
                'points': 80

        }]
    }]
})

I'm unsure of what might be causing the issue..

Answer №1

Completed:

Check it out here

All that's left is to create another function within the scope:

$scope.checkTab = function (relationship) {
   return relationship.tab.id == $scope.activeTab;
}

Then include it in the filter:

relationship in user.friends | filter: checkTab

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

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

Avoid accidental overwrites in localStorage using JavaScript

I've been working on a Vue project where I'm implementing a shopping cart feature. In this setup, when the user clicks on a button, the item details are stored in localStorage and then displayed in the shopping cart interface. However, I encount ...

Karma and RequireJS fetching files beyond the base URL

My goal is to set up automatic testing using karma with the following file structure: /assests /css /font /img /js /collection /lib /model /plugin /spec /view test-main.js main.js /templates index.html karma.conf.js In my ...

Asynchronously parsing CSV files in NodeJs using the `await` keyword within the `on('data')`

I have a specific code snippet that is designed to read lines from a .csv file one by one and then store each processed row into a database const csv = require('csv-parse') const errors = [] csv.parse(content, {}) .on('data', async ...

Switch the URL of the current tab to a different one by clicking a button within a Chrome extension with the help of JavaScript

Could someone assist me in changing the current tab URL to a different website, such as , using a chrome extension? Here is my JavaScript code: chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { var tab = tabs[0]; console.log(tab.url) ...

Karma Unit: Evaluating keypress functionality utilizing the escape button

Within my directive, I have the following code: $document.bind('keydown', function ($event) { if ($event && $scope.visible && $event.which === escapeKey) { $scope.toggle(); $scope.$apply(); } }); I am looking to te ...

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...

Creating an uncomplicated search bar that dynamically adjusts values based on its function

Summing it up, there is a div situated within my app.component.html: <div class="col-lg-6 search-div"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-b ...

Tips for including parameters in the existing URL using AngularJS

I used the $location.url() method to obtain my current URL. $location.url() returns '/details' Now, I am looking to append some parameters, such as '/details/student' How can I add '/students' to my current URL upon a ...

An issue in D3.js where the chart bars are not properly synced with the x-axis labels

Currently delving into the world of d3.js for the first time. In our project, we needed to adjust the width of each bar from .attr('width', xScale.rangeBand()) line 46 to .attr('width', '10') line 50 After making this cha ...

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

Add a sub-modal window inside a separate container

Is there a way to attach this modal to an external div? The current setup involves nesting it within a container that has a fixed height. I'm looking to move it outside of that container. Here is the JavaScript code for the modal: client.fetchQuery ...

AngularJS date formatting fails to properly format dates

{{ map.thedate }} The result is 2014-06-29 16:43:48 Even after using the following code, it still displays the same date as above. {{ map.thedate | date:'medium' }} ...

"In JavaScript, the use of double quotes within a string is

What is the best way to include double quotes in a JavaScript string for display on a webpage? I'm currently tackling my JavaScript assignment and need to insert double quotes within a list, like the example below: if (i == 0) { error += "<l ...

Spin a sphere by clicking on a link using three.js

I've designed a spherical object and have a group of links. I'm looking for a way to manipulate the position or rotation of the sphere by simply clicking on one of the links. Despite extensive searching, I haven't been able to find an exampl ...

Updating or adding items to an array using underscore library

A scenario involves an object with incoming data and an array that contains saved data. The goal is to check if the "cnName" from the new data already exists in the "savedData" array. If it does, then the object in "savedData" should be replaced with the n ...

What are some effective methods for handling error objects in REST API services?

Encountered an error object: Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES) Type of (err): Object Now, I am looking to pass this object to another web service (REST API) What content ty ...

I am struggling to showcase the values of character names stored within an array

I am currently developing a Library Express App and utilizing fake data to easily showcase the values on the screen. const PopularBooks = [ { id: 1, title: "Harry Potter", characters: [ { id: 1, name: "Har ...

Retrieving checkbox values from HTML and storing them in a temporary JavaScript/HTML variable

My form has multiple checkboxes all with the same id "cbna". When I submit the form, I want the JavaScript code to check if at least one checkbox is checked. If no checkbox is checked, an alert should appear. If a checkbox is checked, the value stored in ...

Update the ngModel value once input validation has been successfully validated

My input is defined as shown below <input id="xInputControl" name="xInputControl" type="text" xInput class="form-control" [(ngModel)]="x" #validated="ng ...