The Angular filter is failing to display the category value

My issue lies in adding a filter to display categories, as my setCurrentCategory function is not showing any value but instead displaying 'undefined'. The goal is to show the category for each person. I'm using ng-click to pass to my function and then utilizing a filter to pass the value.


var myapp = angular.module("myapp", []);

myapp.controller("myCtrl", function($scope){
    
    $scope.categories = [
        {'id' : 0, 'Name' : 'Manu'},
        {'id' : 1, 'Name' : 'Rajveer'},
        {'id' : 2, 'Name' : 'Heament'},
        {'id' : 3, 'Name' : 'Yogesh'},
        {'id' : 5, 'Name' : 'Sajid'},
    ];

    $scope.languages = [
        {'id' : 0, 'title' : 'Angular', 'url' : 'http://angularjs.org', "category": "Manu"},
        {'id' : 0, 'title' : 'Html5', 'url' : 'http://www.html5rocks.com/en/', "category": "Manu"},
        // Additional language data...
    ];

    $scope.currentCategory = null;

    function setCurrentCategory(category) {
        $scope.currentCategory = category;
    }

    function isCurrentCategory(category) {
        return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
    }

    $scope.setCurrentCategory = setCurrentCategory;
    $scope.isCurrentCategory = isCurrentCategory;

});

.left_box {background-color: #909090; padding: 0px;}
// More CSS styling here...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer №1

Ensure that the reference used in the ng-repeat matches the one passed to the Setcurrentcategory function in your code.

<li ng-repeat='item in items'> 
        <a href="#" ng-click="setCurrentItem(item)">{{item.Name}}</a>
        </li>

Answer №2

Ensure that you are correctly utilizing the category object:

<li ng-repeat='category in categories'> // updated to 'category'
            <a href="#" ng-click="setCurrentCategory(category)">{{category.Name}}</a>
            </li>

Answer №3

<ul>
<li ng-repeat='type in types'>
<a href="#" ng-click="setSelectedType(type)">{{type.Name}} </a>                   
</li>           
</ul>

Make sure to pass the correct type parameter

<ul>
<li ng-repeat='type in types'>
<a href="#" ng-click="setSelectedType(type)">{{type.Name}}</a>                      
</li>           
</ul>

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

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

Responsive design in Android does not function as intended

My goal is to create a responsive design for my website, but I am encountering issues with importing the CSS files into the HTML. When I try to view the site in both the Windows version of Chrome and the Android version, all I see is a white screen. I am c ...

Loop through each instance of a data record in a JSON document using Vue's v-for directive

I am currently working on a project that involves extracting data from a website that monitors traffic jams and maintenance work. My goal is to specifically retrieve information about traffic jams and display them individually. The code I am using utilize ...

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

Effortlessly create a seamless transition in background color opacity once the base image has finished

I've set up a div with a sleek black background. Upon page load, I trigger an API request for an image, which is then displayed in a secondary div positioned behind the main one. After this, I aim to smoothly transition the overlaying div's opaci ...

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

Ways to refine data using multiple criteria

I have a list of alarm data that I need to filter based on specific conditions. If there are multiple alarms of type "pull_Alarm" and "emergency_alarm" in the same location, I want to prioritize the "emergency_alarm". Here is my list: [ { ...

Using Angular's ng-click to navigate to a new page and sending parameters:

Upon clicking the edit button, a new page will be opened and a REST call will be made to populate the page with the parameters passed in. ...

React 17 Form not registering the final digit during onChange event

I am currently experiencing an issue with a form that includes an input field of type "number." When I enter a value, the last number seems to be skipped. For example: If I input 99 into the box, only 9 is saved. Similarly, when typing in 2523, only 252 ...

Check if the required application is installed via npm install

Currently, I am working on writing unit tests for my Angular application. I am in the process of detailing all the necessary packages for unit testing, such as Karma and PhantomJS. Operating System: Ubuntu 14. An issue I've encountered is that Phanto ...

The process of uploading data onto a map using jquery is quite inconsistent in its functionality

HTML Instructions: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <me ...

The lightSlider is only destroyed and rebuilt once during its operation

I am facing a challenge with multiple buttons having the same class while trying to destroy and rebuild the lightSlider script. In the CMS where I have implemented this, images and ajax are being loaded. However, as the JavaScript is triggered by the read ...

Sending form data using Node.js

Is there a way to send input form data as part of a URL in Node.js? Below is an example code snippet demonstrating this. app.get('/', (req, res) => { res.render('index'); }); app.post('/scrape', function(req, res){ ...

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

Issue with JavaScript Date.parse function not functioning as expected

I have implemented a date validation method in my application to check if a given date is valid or not. myApp.isValidDate = function(date) { var timestamp; timestamp = Date.parse(date); if (isNaN(timestamp) === false) { return true; } return ...

Unraveling exceptions in Node.js akin to handling them in Java

I'm seeking to develop a node application and I need guidance on exception handling. In Java, we utilize the exception class for this purpose. How can I achieve something similar in node? Are there any libraries available specifically for handling exc ...

JavaScript encountered an issue: Uncaught ReferenceError - 'userNumber' is undefined at line 43

I'm currently working on a JavaScript guessing game where I've already set up the necessary functions. However, I keep encountering an error. An error in my JavaScript code is causing a ReferenceError: userNumber is not defined on line 43 to b ...

I am struggling with grasping the concept of the event system

I'm encountering an issue with the following code snippet: <template> <div class="chart" v-bind:style="chartStyleObject" v-on:mousedown.left="initHandleMousedown($event)" v-on:mouseup.left="initHandleMouseu ...

Ways to fix a "define is not defined" issue when utilizing jasmine karma with compiled typescript for component testing

I'm faced with an issue in my typescript app where the compiled code is stored in a single file named myjs.js within the js folder. Additionally, I have karma jasmine configured on my workspace. Inside myjs.js, there's a segment of code like thi ...

Establish remote functionality for a JSON AJAX PHP form

Recently, I encountered an issue with my Javascript code that interprets JSON from PHP. Surprisingly, it works perfectly fine on my local server, but when I attempt to transfer the script to a different server, it fails to function. To address this, I have ...