Empty text box

I've been attempting to clear ng-model inputs, but haven't had any success and I can't seem to figure out why.

Here is what I have:

<button ng-click="$ctrl.clear()"></button>

And in the clear action, I have:

$scope.$event = null;

It should work, right?

If I do this directly in the HTML:

<button ng-click="$event = null"></button>

It will work, but I want to avoid doing this in the HTML if possible.

I've already tried using angular.copy and:

$scope.$event = {};
$scope.$event = '';

But it doesn't seem to work and isn't providing me with any error messages.

Thank you.


UPDATE:

<input type="text" ng-model="$event.title"/>
<input type="text" ng-model="$event.name"/>
<input type="number" ng-model="$event.age"/>
<input type="date" ng-model="$event.date"/>

Answer №1

The issue lies within the click handler function; $event pertains to the event object, not your specific event object within the current scope.

To avoid confusion, consider using a different name to reference your object. It's worth noting that property names starting with $ are commonly reserved by angularjs for its own properties, so it's generally best practice to steer clear of them.

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

How to trigger a function across various controllers in AngularJS

We're in the process of creating an app using phonegap onsen and angularJS. Attempting to invoke a function from a different controller has been challenging. Despite following various documentation such as this Unfortunately, it's not working f ...

Unspecified error with Laravel request

Currently, I am a novice in Laravel and still in the process of exploring everything. I have been using Angular HTTP post to transfer data to Laravel, and in the Laravel controller, I have successfully used dd($request) to debug the request object: dd($re ...

I'm looking for the specific jQuery/JavaScript function that will accomplish this task

let data = [{ name: "abcd", type: "1 kg" }, { name: "efgh", type: "1 cai" }, { name: "ijkl", type: "1 kg" }]; If I have the name, I would like to get the corresponding type. For example, if I call getType('abcd'), it sho ...

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

Selecting an option from the dropdown menu to automatically fill in a textbox within

I've run into a small hiccup with some javascripts/AJAX and could really use some guidance in the right direction. My issue involves populating the per-carton-price-field using collection_select within a form. This form is meant to generate an entry ...

Unlocking Worldwide Availability for Identifying URL Parameters

Is there a way to obtain global access to the current URL ID params? I am facing difficulty accessing the current URL ID in a child component within React. The ID is essential for querying a MongoDB database in my ChecklistTool component. Typically, I wou ...

Selecting Laravel lists by month option

I'm encountering a problem here. The error message reads "Too few arguments to function App\Http\Controllers\ViewsController::OBviews(), 0 passed and exactly 1 expected" Here is my controller: public function OBviews($date) { ...

Progression from Angular2-rc1 to Angular2-rc2 encounters TypeScript error: anticipating ',' (TS1005)

Encountering an issue with upgrading Angular2 from RC1 to RC2, following exception is being thrown: https://i.sstatic.net/bB6di.png Here's my main.ts file, I haven't made any changes to it during the upgrade process. Line 13 is where the bootstr ...

Incorporate an HTML code string into an Angular 2 template

I am working with HTML code stored in a Component variable, shown below: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `Hi <div [innerHTML]="name"></div>`, styleUrls: [' ...

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

Is it necessary to include my library dependencies in the devDependencies section if I am only planning to publish the library bundle?

When creating a bundle for a library, should the library dependencies be placed in devDependencies? I am developing an NPM library in TypeScript that relies on several dependencies, including React components. As part of the build process, we compile to J ...

JavaScript that is subtle and lacks function parameters

Suppose you have: <div id="data" onclick="handleData(1)">Datum 1</div> and you prefer late binding instead: <div id="data">Datum 1</div> <script> $("#data").click(function() { handleData(1); }) </script&g ...

How can I deselect the 'select-all' checkbox when any of the child checkboxes are unchecked?

Here is the code provided where clicking on the select-all checkbox will check or uncheck all child checkboxes. If any child checkbox is deselected, the 'select-all' checkbox should also be unchecked. How can this be achieved? $(document).read ...

Adding JSON data to an array for Flot Diagram

I've been struggling with the task of organizing data into an array. The existing temp array is structured as follows: tmp[0][0] = "NY" tmp[0][1] = "52" tmp[1][0] = "FL" tmp[1][1] = "25" My goal is to transfer this data into a new array called data. ...

Developing a dynamic web application using the Django framework along with the Vue.js library and Highcharts for

I am currently working on a data visualization web app using Django, Highcharts, and JQuery. I have recently transitioned from JQuery to Vue JS and I am struggling with fetching JSON data from a specific URL. Below is the code snippet: Template <!doc ...

How can I utilize Axios in Vue.js to access a local JSON file?

I'm trying to figure out how to read a local JSON file using Axios. The data.json file is located in public/info/data.json. However, every time I attempt to make a get request, I receive a 404 error message. Here is the content of data.json: [ {" ...

Move the dist folder to the libs directory using webpack

I am interested in achieving the following task: After successfully using gulp for copying libraries, I added the below code to my tasks: gulp.task('copy:libs', function() { return gulp .src(npmdist(), { base: paths.base.node.dir }) . ...

Obtain information from an ajax request

I am working on a website where I need to implement a button that checks if the user has specific permissions before opening a new web page in a popup window. In my JavaScript code, I have the following function: function sendAjax(methodName, dataArray, s ...

How to Convert Python Lists into JavaScript?

octopusList = {"first": ["red", "white"], "second": ["green", "blue", "red"], "third": ["green", "blue", "red"]} squidList = ["first", "second", "third"] for i in range(1): squid = random.choice(squidList) octopus = random. ...

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...