Click on Angular model refresh

I am facing an issue with an input field that uses the "filtro3" model. When I click on it, I want to clear its contents. The following code works as expected:

<input type="text" ng-model="filtro3" placeholder="Buscar" ng-click="filtro3 = null">

However, when I try to achieve the same functionality using a function, it does not work:

<input type="text" ng-model="filtro2" placeholder="Buscar" ng-click="actualizaCombo()">

$scope.actualizaCombo = function() {
console.log('actualizaCombo');
console.log('filtro2 before='+$scope.filtro2);
$scope.filtro2 = null;
console.log('filtro2 after='+$scope.filtro2);
}

When I execute the function, the console output is as follows:

actualizaCombo
filter2 before = undefined
filter2 after = null

When I type "as":

actualizaCombo
filter2 before = null
filter2 after = null

However, the input field does not get cleared and continues to display "as". Can anyone point out what I am missing or what is going wrong? Thank you.

Answer №1

It is possible that your input is contained within an angular directive that generates a child $scope. As a result, when attempting to access $scope.filtro2, it may not be found. It could potentially be located in $scope.$parent.filtro2 or a similar location.

In Angular, it is recommended to use dot notation when referencing objects. Instead of placing filtro2 directly in $scope, consider using an object like $scope.filters = { filtro2: 'test' }.

Alternatively, you could pass the element you wish to modify as an argument in your ng-click event handler: ng-click="myAction(myElement)".

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

A guide on extracting the geometry from an STL model imported into three.js

After using STLLoader to load an STL file into three.js, I am trying to access the vertices and geometry of the model for further use. However, I am encountering difficulty in retrieving the geometry after calling the loader. How can I achieve this? Belo ...

Node.js is essential when using Angular for implementing ui-select components

I'm currently delving into learning AngularJS. I've successfully created a basic web application using AngularJS, with Java EE powering the backend (server side). This app is being hosted on Tomcat. The advantages of AngularJS over JQuery are bec ...

The criteria set by jQuery are met

I have developed my own custom form validation for two inputs: one for a phone number and the other for an email address. Additionally, I have integrated two forms on a single page. Here is a snippet of my code: var email, phone; if (email address passe ...

What sets Express.js apart from koa2.js in handling asynchronous functions?

I've encountered a situation where I had to set up the router using Express, and it was functioning correctly with the following code: router.get('/',(req,res)=>{ queries.getAll().then(stickers=>{ res.json(stickers) }) ...

Obtaining information from a local JSON file in AngularJS

I'm facing some issues with retrieving data from a JSON file using the structure below. In my controller.js file, I've written: var controllers = angular.module('hotels.controllers', []); controllers.controller('AppCtrl', f ...

Error encountered: Unable to call JavaScript across processes during the click command in Selenium IDE

My current setup involves using an SPA built on AngularJS 1 and Selenium IDE 2.9.1 for functional testing. One of the challenges I am facing is with a button that has an onclick handler on a form. Whenever I try to click this button during a test scenario ...

Guide to integrating a deterministic game loop with tick-based mechanics

My current project involves creating a "simple" 3D game using Three.js and incorporating a network framework for multiplayer functionality in the future. After some research, I found that many "action" games utilize a "tick" based game loop to sync clients ...

Ways to modify the color of the legend text in a HighChart graph

Click here https://i.sstatic.net/iuPs4.png I am attempting to modify the color of the series legend text from black to any color other than black: $(function () { $('#container').highcharts({ legend: { color: '#FF0000', ...

Check out the source code of the file causing the redirection

Whenever I click on a URL, it triggers a redirect using the window.location function. I am curious to examine the code within this HTML file. Unfortunately, as it is constantly redirecting, I am finding it difficult to access the source code. Is there a w ...

Retrieving JSON information stored in a JavaScript variable

I'm feeling a bit embarrassed to admit it, but I am still learning the ropes when it comes to Javascript development. I've hit a roadblock and could really use some help from the experts here. Thank you in advance for all the assistance this comm ...

Making a chain of multiple AJAX requests using jQuery

My current challenge involves retrieving data from select options on a website using JavaScript. Specifically, I am trying to obtain a list of zones within my country from a website that has this information. The issue I am facing is the hierarchical disp ...

Implementing server authentication with Faye in Node.js

As a complete newbie to node.js and faye, I'm struggling with the basics and not sure what questions to ask. This is how my faye server setup looks like, running on Nodejitsu: var http = require('http'), faye = require('faye' ...

The node.js express app.get and app.post are currently malfunctioning

I have encountered an issue with my Express JS code. Currently, I am using app.use and everything works perfectly. However, when I try to use app.post or app.get instead of app.use, the code stops working and my IDE (WebStorm) does not recognize these meth ...

Is it possible to utilize the node package ssh2 within a web browser environment?

I am working on a project for school where I am creating an SFTP client directly in my browser. I have successfully implemented the node package ssh2 and it works perfectly when running the code in the terminal. I can connect to the server, read directorie ...

Enhancing the AngularJS Login feature for server authentication

Struggling to adapt Valerio Coltrè's Angular login example on GitHub to work with my ServiceStack authentication. Despite appreciating Valerio's implementation of authentication, I am facing challenges as he uses an httpBackend mock and interce ...

What is causing my conditional operator to malfunction?

What is the reason for the output being undefined instead of "old" in this scenario? function test(age) { return 12 < age ? "old" : "young"; } test(15); ...

Issue with ng-disabled functionality on Submit button in AngularJS version 1.4.8

New to AngularJS and working on my first contact form. Despite trying various solutions found in online posts, I'm still struggling with a simple task. The goal is to have the Submit button disabled until required fields (email and comments) are fill ...

"Is there a way to ensure that jPlayer plays the same song even after a page refresh

I have been working on integrating jPlayer with Ajax to ensure that when the page of my website is refreshed, jPlayer will continue playing its current song seamlessly. I have successfully stored track information and the current track during refresh, ho ...

`Manipulating the image source attribute upon clicking`

I need help changing the attr: { src: ...} binding of an img element when a different image is clicked. Here is an example: $(document).ready(function () { var viewModel = { list: ko.observableArray(), showRenderTimes: ...

Seeking assistance with formatting output for OpenCPU and igraph

Here is my adjacency array data: var g = [[10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]] The code I am using in OpenCPU is as follows: ocpu.call("centralization.closeness", {graph: g} ...