Struggling to comprehend certain sections of code within AngularJS

I have been working through an AngularJS book to learn, but I am struggling with some code that is not well explained.

The selectCategory() function is included in the ng-click directive like this:

<a ng-click="selectCategory()">Home</a>

<a ng-repeat="item in data.products | orderBy:'category' | unique:'category'"
   ng-click="selectCategory(item)">

   {{item}}

</a>

Here is the filter used to filter products based on categories when the ng-click directive is triggered:

ng-repeat="item in data.products | filter:categoryFilterFn">

These functions are defined as follows:

angular.module("sportsStore")
.controller("productListCtrl", function ($scope, $filter) {

    var selectedCategory = null;

    $scope.selectCategory = function (newCategory) {
        selectedCategory = newCategory;
    }

    $scope.categoryFilterFn = function (product) {
        return selectedCategory == null ||
        product.category == selectedCategory;
    }
});

I am having trouble understanding these codes, especially how the functions are defined. Why is $filter included in the argument? Can you please explain these definitions to me? I am new to this and would really appreciate your help. Thank you!

Answer №1

This example could use some improvement!

Here is a better way to structure it:

<a ng-click="selectCategory()">Home</a>

<a ng-repeat="item in data.products | orderBy:'category' | unique:'category'"
   ng-click="selectCategory(item.category)">

   {{item.category}}

</a>

In this setup, you first select a category from the list of unique product categories. Then, products belonging to that selected category are displayed using the filter (ng-repeat="item in data.products | filter:categoryFilterFn).

The categoryFilterFn function filters products based on whether they match the selected category. If no category is selected, all products are displayed.

I hope this clarifies things for you!

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 is the reason for not receiving a JSON object in the response from my personal node.js/express server?

-- Exploring a New Challenge -- I am currently working on creating an e-form signup for a client as part of our business marketing strategy service. The form design is complete and looks excellent. Now, I need to connect it to the existing API that our bu ...

HTML Multi-Column List Box

Can a List Box be created with List Items displayed in Multiple Columns? I know there are other options available, but I'm curious if this is achievable using the <select> tag ...

Unexpected error occurred when attempting to fetch the jQuery value of the radio button: "Unrecognized expression syntax error"

I am facing an issue while trying to extract the value of a radio button using $("input[@name=login]"); I keep getting an "Uncaught Syntax error, unrecognized expression" message. To view the problem, visit http://jsfiddle.net/fwnUm/. Below is the complet ...

What is the method for including an inner wrapper around an element in Angular?

Is there a way to create an Angular directive that adds an inner wrapper to a DOM element without replacing the inner content? I have tried implementing one, but it seems to be replacing instead of wrapping the content. (view example) Here is the HTML sni ...

The load event in React's iframe is failing to fire after the src attribute is modified using state

In the process of creating a registration form for a React application, we encountered the need to incorporate an HTML legal agreement as an iframe. This legal document is available in various languages, one of which can be selected using a drop-down menu; ...

Resolved issue with sticky header movement after scrolling event

I've been working on a sticky header code, but I'm having trouble achieving a smooth scroll transition. The fixed header seems to jump after just one scroll. Here is the basic HTML structure: <div class="headerWrapper"> <div id="to ...

Facing problem with Angular 7 when making a GET request for non-JSON data

Currently, I am retrieving JSON data from a URL using the following method: this.http.get('http://localhost:3200/mydata').subscribe(data => { console.log(data); }); The response is in JSON format, and everything seems to be working fine. ...

"Looking to programmatically close a modal in JavaScript that was opened using the 'data-target' attribute? Here's how you can

I have a modal template embedded in the same HTML file as my controller. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem">Delete selected item</button> < ...

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

Guide to streaming audio files using vue.js

I am attempting to incorporate an audio file into my vue.js project using the following code: import sound from '../../recordings/sound.mp4' const audio = new Audio(sound) audio.play() Although this method works perfectly fine, I have encounter ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

Angular.js - index template fails to execute controller, but other templates work flawlessly

I am facing a strange issue with my Angular application that uses ngRoute. I have set up different controllers for each template in the routes.js file: routes.js: angular.module('PokeApp', ['ngRoute']) .config(function($routeProvide ...

Steps to open and configure a Mobile-Angular modal from another controller

Is it possible to use a modal in Angular JS for mobile devices without compromising the layout? I'm having trouble setting up the controller for my modal inside my main controller and passing parameters. Should I consider using ui-bootstrap for this p ...

Exploring the use of radio buttons with Bootstrap and AngularJS

Having a radio button like this: <tr> <td>GTS ? </td> <td> <div class="col-md-10 columns"> <ul id="GTSD" class="radio" role="menu" aria-labelledby="menu1"> <label class= ...

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

While attempting to access the reed.co.uk REST web API in order to retrieve all related jobs, I am encountering an issue. Despite passing my username and password, a popup window keeps appearing when I call the URL. The alert message displayed reads: i ...

Configuring a timeout for your Next.JS API can help optimize the performance

Due to restrictions on another API, my own API takes 10 minutes to return a result. When running locally, I am able to wait and successfully receive the data after 10 minutes. However, when deployed on Vercel, I encounter a timeout error (status code 504). ...

Incorporating an Edit button with an icon into a react-bootstrap-table2

Is there a way to insert buttons in the Edit column of my table so I can easily edit a row? I believe there should be a method to personalize the column and incorporate icons as shown in the example image. Sample Image of What I want to do: import React ...

Flickity remains in plain sight on desktop devices

I am trying to hide the flickity slider on desktop and larger devices. I have followed the instructions in the documentation, but for some reason, it's not working as expected. Here is how the div looks: <div class="w-full flex pl-4 pb-16 overflo ...

Utilize VueJS to pass back iteration values using a custom node extension

Hey there! I'm currently working on a Vue app that generates a color palette based on a key color. The palette consists of 2 lighter shades and 2 darker shades of the key color. To achieve this, I have set up an input field where users can enter a hex ...