From Angular to ng-repeat: Utilize a filtered array variable

Here is a link to my example in Plunker demonstrating the issue I am facing. Within the ng-repeat, I am utilizing array(filtrowane) to store data from filter results. Additionally, I have included an ng-change on the input to display the value of filtrowane.length in the console. The variable filtrowane is defined in the controller, but after entering input, it displays different values in the console compared to the view. Could you help me understand why?

PS: Make sure to run your web browser console to observe the discrepancy.

Check out the example on Plunker

javascriptarraysangularjsfilterangularjs-ng-repeat

Answer №1

When a value is changed, the ng-change function is triggered first, followed by the $digest process which will update filtrowane. If you are using the following notation:

item in filtrowane = (tablica | filter:search)

Avoid using filtrowane in the controller. HTML should be for viewing purposes only, so refrain from declaring any variables there that are used in the model (JavaScript).

Check out this link: http://plnkr.co/edit/QAHlbuZqWX4szglvMP87?p=preview This code achieves the same result as yours, but handles filtering in JavaScript. It may be a bit more complex, but clarity is improved. (especially useful for large arrays)

Answer №2

Consider using ng-blur in place of ng-change

<input type="text" ng-model="search" ng-blur="checkFilter()">

The reason for this change is that the ng-change may be triggered before the filter is applied, resulting in the retrieval of the old value.

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

Different applications of data streaming apart from multimedia content

Exploring the various applications of streaming, particularly when sending data from a server to a visual client such as a web browser or an application, has sparked my curiosity. While I grasp the fundamental idea of transmitting data in chunks rather t ...

javascriptnode.jsstreamstreaming

HTML & jQuery guide: The correct way to execute a function on an anchor element (compatible across all browsers)

My webpage contains several anchor tags that are used to trigger a function. Although everything is functioning correctly, I am unsure of the best way to ensure cross-browser compatibility, as different methods can be found online. I have opted to use jQu ...

javascriptjqueryvoidpreventdefault

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

javascripthtmltwitter-bootstrapcarousel

In what way does the Express.js 4 Router facilitate navigation to the 404 error page?

When using the express generator, the code generated in the app.js page includes: app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error(&ap ...

javascriptnode.jsexpress

Choose an option from a list of items in a nested array by

I'm working with a nested array (3d) and I want to populate a drop-down select menu with its values using PHP and jQuery I've tried implementing this for two-level arrays like categories and sub-categories, but what if some sub-categories have f ...

javascriptphpjquery

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

javascriptjqueryhtmlcss

Using the map method in JavaScript, merge two separate arrays to create a new array

In my ReactJS project, I have created two arrays using map function. The first array is defined as follows: const hey = portfolioSectorsPie.map(sector => sector.subtotal); const hello = portfolioSectorsPie.map(sector => sector.percentage) The value ...

javascriptarraysreactjs

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

What is causing my divs to behave as if I set a margin-top/margin-bottom of one and a half centimeters?

I'm currently developing an AngularJS application and I've encountered some issues with unnecessary whitespace. <div class='user' ng-repeat='session in sessions'> <div class='text' ng-bind='monolog ...

javascripthtmlcssangularjsmargin

Is there a way to simulate pressing the ENTER/RETURN key using JavaScript executor in Selenium using Python?

Greetings everyone, I am a newcomer to Python Selenium and currently working on automating a website. However, I have encountered an issue with the search text box of the website as it does not feature any clickable buttons once the text is entered. Here ...

javascriptpython-2.7selenium-webdriverautomationwebdriver

Grid interface is not refreshing

Despite trying various solutions and reading through previous questions, I am still facing an issue with updating my grid. While the data loads correctly, adding new data does not trigger a grid update. Even though I have a simple test button that displa ...

angularjsangular-ui-grid

Error 500: Issue with JQuery AJAX File Upload

Hey there, I'm facing an issue with doing a file upload using JQuery's AJAX feature as I keep getting the error 500. $(function() { $( 'form' ).submit ( function() { $.ajax({ type: &a ...

javascriptphpjqueryajax

Mongooses, Callbacks, and Bears, oh my! I'm having trouble accessing the values

Greetings everyone, I find myself stuck in a callback nightmare while attempting to retrieve basic values from a Mongoose count by passing a {query}. Although I can access the value and see it fine in the console within the callback, extracting it from an ...

javascriptexpresscallbackhandlebars.js

tips for accessing dynamic key pair value data in Angular

I am facing an issue where I cannot retrieve the dynamic key pair value from the dynamic JSON. Below is my JSON: var d = { "pexels-photo.jpeg": { "information": "laptop", "desc": { "mimetype": "image/jpeg", "id" ...

javascriptjsonangulartypescript

Steps to extract selected values from the MUI data grid

Can values be retrieved from a mui DataGrid? I have a table and I would like to create a custom export that takes into account user filters and the display status of columns. However, I need to access these filtered values. Is there a way to achieve this ...

javascriptmaterial-uidatagrid

What is the best way to insert a variable into the HTML tags of a Material UI Component?

Currently, I am utilizing the Material UI component shown below: <CardTitle children={child} /> I am now looking to incorporate some HTML code that includes a variable which will be contingent on the state of my React component. ... render() { c ...

javascriptreactjsmaterial-ui

When running npm install, the dist folder is not automatically generated

I found a helpful tutorial at this link for creating a Grafana plugin. However, when I tried copying the code from this link to my test server (without the dist/ folder) and ran npm install, it did not generate a new dist/ folder but created a node_module ...

javascriptnode.jsnpmnpm-installgrafana

Converting a cURL response string into a JSON array using PHP

I am currently utilizing Curl to make a request to a REST API. Below is my code: #Initializing Curl $ch = curl_init('https://192.168.0.1/api/invoke/LicenseRequest'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch ...

phparraysjsoncurl

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

javascriptjqueryhtmlcssanimation

In Nodejs, the function 'require' fails to load a module when using specific filenames

Hello everyone, I am a long-time user but this is my first time asking a question. So, I have a file named file.js where I am trying to require another file called user.service.js at the beginning of the file: var userService = require('./user.servi ...

javascriptnode.js