Assigning null values, or initializing values in AngularJS

How can I clear input values to null after clicking on a button?

Empty fields:

Fields with existing values that I want to reset back to empty fields.

HTML:

    <label class="item item-input">
       <input id="tezina" type="number" placeholder="Tezina" ng-model="podaci.tezina">
       </label>
       <label class="item item-input">
       <input id="mamac" type="text" placeholder="Mamac" ng-model="podaci.mamac">
       </label>
       <label class="item item-input">
       <input id="pribor" type="text" placeholder="Pribor" ng-model="podaci.pribor">
       </label>+
<button class="button button-positive" ng-click="clearFields()">Clear</button>

I attempted the following function in the controller (which is not working):

$scope.clearFields = function() {
$scope.podaci = null;

}

Answer №1

If you need to reset the values, you can use the following code:

$scope.clearFields = function(){
          $scope.data.weight="";
          $scope.data.bait="";
          $scope.data.gear="";
          }

Example Link

Answer №2

When dealing with objects:

     $scope.data="";

When working with arrays:

     $scope.data=[];

Answer №3

Consider initializing the variable podaci as an empty object:

$scope.podaci= {};

UPDATE

You can also try setting specific properties of podaci to null:

$scope.podaci.tezina = null;
$scope.podaci.mamac= null;
$scope.podaci.pribor= null;

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

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

Swapping values in JSON by comparing specific keys: A guide

I have JSON data that contains a key called reportData with an array of values: {"reportData":[ ["1185","R","4t","G","06","L","GT","04309","2546","2015","CF FE","01H1","20","23840","FF20"], ["1186","R","5t","R","01","L","TP","00110","1854","2016" ...

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

Conditional statement that includes Node.js scheduling function

I am currently working on a Node.js project and I need to execute a specific portion of conditional code after waiting for five minutes since the last piece of code executed. This action should only happen once, not on a daily basis or any other frequency. ...

Tips for creating animations with JavaScript on a webpage

I created a navigation bar for practice and attempted to show or hide its content only when its title is clicked. I successfully toggled a hidden class on and off, but I also wanted it to transition and slide down instead of just appearing suddenly. Unfort ...

What could be the reason for AngularJS directives (such as attributes) appearing as "invalid" in WebStorm 8?

Just recently, I downloaded and installed WebStorm 8 onto my computer. I have been working on some AngularJS projects and have encountered a frustrating issue. The AngularJS plugin appears to be only partially functioning - when I type ng- in the code edit ...

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

.toggle function malfunctioning

Upon page load, I have a script that toggles the County menu. The goal is to hide the county menu if any country other than "United Kingdom" is selected on page load. If the user selects another country after the page has loaded, there is an issue where ...

Activate automatic click or force trigger JavaScript function

In the MVC view I am working with, there is a form that allows for file submission. //Submit file <% using (Html.BeginForm("MethodName","ControllerName", FormMethod.Post, new { enctype = "multipart/form-data"})) { %> <input type=" ...

Discovering how to access the console once an Electron app has been packaged

Just as the title implies, I have successfully created a node / angular application using electron. The application works perfectly when launched with the electron ./app command. However, after building it (using either electron-packager or electron-builde ...

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

Exploring the benefits of leveraging Express with SSL security features

I recently acquired a Comodo SSL certificate for setting up an SSL server with express. The certificates I have include: AddTrustExternalCARoot.crt COMODORSAAddTrustCA.crt COMODORSADomainValidationSecureServerCA.crt mysite.com.key mysite.com.csr mysite_co ...

Trouble with apostrophes rendering in JavaScript on WordPress posts

My current challenge involves adding a post to Wordpress using an external script. This post includes a JavaScript section that contains an iframe for displaying movies. Knowing that Wordpress splits default tags, I have implemented a special plugin to han ...

When attempting to change a Component's name from a string to its Component type in Angular 9, an error is thrown stating that the passed-in type is

When working with Template HTML: <ng-container *ngComponentOutlet="getComponent(item.component); injector: dynamicComponentInjector"> </ng-container> In the .ts file (THIS WORKS) getComponent(component){ return component; //compo ...

Use JavaScript regex to replace a string only if its length exceeds a certain specified limit

My current approach involves using JavaScript regex to insert an HTML markup for all identified URLs: var exp = /(((|www\.|(http|https|ftp|news|file)+\:\/\/)[&#95;.a-z0-9-]+\.[a-z0-9\/&#95;:@=.+?,##%&~-]*[^.|&bso ...

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

I previously had my context and context provider set up in a file, and everything was working perfectly. However, I recently decided to convert all of my files to TypeScript, including this one. Unfortunately, I've encountered a strange issue that I c ...

Reveal the table only once a search has been completed

Currently, I am in the process of developing a small project and my aim is to have the table with the results appear only upon clicking the button or initiating a search. If you are interested, you can view it at this link: . My objective is to keep the t ...

Modify class upon click event

I've been trying to solve this question with a few answers I found, but none of them seem to work with my script. My goal is to change the class of the .icon-menu element when it's clicked. What would be the best approach to achieve this? $(&ap ...

Commitments do not come with a collections feature

Struggling to implement the collection method, it seems that I can't directly use db.collection as db is calling connectDB, which returns conn, my mongoURI, as a promise. How can I modify this setup to effectively utilize the collection method and sen ...