What could be the reason for the Angular filter executing twice?

Recently, I created this sample code based on an Angular tutorial I was following. It's pretty simple and helped me learn a lot about the framework.

Check out the jsFiddle link here

I have a couple of questions regarding this code:

  1. How does the categoryFilterFn function get executed? I assume that anything bound to the HTML view and the $scope is automatically triggered when there are some changes.

  2. Another thing is, why does the filter run twice? When you observe the example, you will notice that there are eight console statements for just four products. This behavior remains even if I consolidate everything into one controller.

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Answer №1

Is it possible for categoryFilterFn to be automatically triggered? It seems like anything connected to the html view and $scope is executed when there are changes.

Indeed, Angular's digest cycle conducts dirty checking to detect any alterations. This process occurs through the watch queue where items are placed based on their bindings in the user interface.

Why does the filter function execute twice? After running the example, I observed eight console statements for four products. Even consolidating everything into one controller doesn't change this behavior.

Once more, Angular employs dirty checking (refer to this informative article). Simply put, the watched value is resolved at the start of a digest cycle, followed by another resolution at its conclusion (the second call). Any mismatch triggers an update in the UI with the new values, demonstrating the operation of two-way binding in basic terms.

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

Combining numerous inputs into an array in a React component

As a beginner in coding, I am eager to learn React by building a project. Currently, I am facing a challenge and seeking guidance. https://i.sstatic.net/Ic2zC.png My goal is to store all these values in an array structured as follows: { option: { s ...

javascriptreactjsarraysobject

Guide to updating the options of a UI select dynamically using AngularJS

I am working on implementing a dynamic feature for my UI Selects. Specifically, I have multiple UI Selects and I want to load choices into the second one based on the selection made in the first one. Despite my extensive search, I have not been able to fin ...

javascriptangularjsui-selectui-select2angular-ui-select

What is the best way to sum the values of an ng-repeat iteration in AngularJS within an HTML template?

Here is the code snippet: <ul id="cart-sidebar" class="mini-products-list" ng-init="cartArray.total = {}"> <li class="item odd" ng-if="cartArray.length === 0">No items in your cart..</li> <li class="item odd" ng-repeat='y ...

angularjsangularjs-ng-repeat

Steps for adding a JSON object to an unordered list

After receiving data from a web server, I created a JSON object using the code obj = JSON.parse(data). This object contains information about dinosaurs such as their name, group, diet, and period. This is what the JSON object looks like: [{"name":"Stauri ...

javascriptjqueryjsonlistunordered

Unable to process submission

Greetings all, I am facing an issue where my submit button seems to be malfunctioning. Despite trying various methods, the problem persists. It is worth mentioning that I am utilizing bootstrap modal, which might be causing this unusual behavior. Let&apos ...

javascriptphphtmlformssubmit

Using jQuery to trigger a click event on a radio button prevents the button from being checked

Having trouble with using the .trigger("click"); function on radio buttons to activate a button in a form. When I use the code below, the button is triggered as expected. However, it seems to be interfering with the radio button, causing it to appear chec ...

javascriptjqueryhtmlforms

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

The defined function in Node.js did not work properly with the callback

This code snippet demonstrates how to use the findOne() method with Node.js and MongoDB. var MongoClient = require('mongodb').MongoClient; MongoClient.connect('mongodb://localhost:27017/blog', function(err, db) { if(err) throw er ...

javascriptnode.jscallbackanonymous

Tips for changing the background with a jquery slider

Using a jquery slider, I have a single layout with a center div for content. I am trying to change the color of the layout as I slide to a different page. This is for an ASP.NET MVC3 project. HTML: <div id="iPhone_Product"> <div class="s ...

javascriptasp.netasp.net-mvcjquery-slider

Utilizing ES6, accessing the first element of an array of objects

How can I access the values of the first or a specific object in an array based on an index using ES6? arrayOne =[ { child: [ {e1: 'ABCD', e2: 'BCDF'}, {e1: '1234', e2: '5689'}, {e1: 'QAZ ...

javascriptarraystypescriptecmascript-6

Why is my jQuery blur function failing to execute?

Currently, I am working with HTML and the jQuery library to avoid core JavaScript in order to maintain consistency. In my project, there are 3 fields and when a user clicks on field1 and then somewhere else, I want only field1's border to turn red. T ...

javascriptjquery

Are you experiencing issues with the cross-origin request failing in react-map-gl?

While setting up a map in react-map-gl and providing my access token, I encountered the following console error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token= ...

javascriptreactjsmapboxreact-map-gl

What type of Javascript is required for a photo carousel that displays random images from a designated folder?

I have a minor issue that has been keeping me up at night. I can't seem to shake it off and find the right solution! Currently, I am working with Bootstrap 4 as my Framework. My task is to create a full-page Carousel that cycles through images random ...

javascriptcssrandomcarouselslideshow

Sending data from Angular POST to a .Net ASMX Service

I am facing a challenge while trying to send an object as a Post parameter to a .NET asmx web service. While I can successfully pass primitive types like int and string as parameters, I am looking for a more efficient way to pass the entire object. This is ...

jsonangularjsc#-4.0asmx

Querying the api for data using Angular when paginating the table

Currently, I have a table that retrieves data from an API URL, and the data is paginated by default on the server. My goal is to fetch new data when clicking on pages 2, 3, etc., returning the corresponding page's data from the server. I am using an ...

javascriptangulartypescriptant-design-pro

Generating Rain in AFrame

Working on a project in Aframe, I had the idea to incorporate a rain effect into my game. However, all my attempts at using animations have failed so far. Any guidance or tips on how to achieve this rain effect with little rectangular prisms would be great ...

javascripthtmlthree.jsaframe

Unexpected behavior observed in while loop with dual conditions

To break the while loop, I need two conditions to be met - res must not be undefined, which only happens when the status code is 200, and obj.owner needs to match a specific value I have set. Since it takes a few seconds for the owner on that page to updat ...

javascriptnode.js

utilize JavaScript on every element that has a specific identifier

<a id="link" href="http://www.google.co.uk">link</a> <a id="link" href="http://stackoverflow.com">link</a> Is there a way to make the JavaScript code apply to all <a> tags with the id="link", instead of just the first one? A ...

javascriptjquery

What is the best way to enhance the capabilities of a current tinyMCE button?

I am interested in enhancing the capabilities of the default buttons in tinyMCE by adding additional functionality. I'm curious to know how this can be achieved. For instance, If I would like the paste button not only to paste content, but also perf ...

javascriptjquerytinymce