Establishing the null values for input parameters

Whenever the button is clicked, I want to reset the input values to null. The function spremi() gets triggered when the button is clicked, but I want to set the values of podaci.tezina and podaci.mamac back to their initial values so that the user can enter new data.

 .controller('SpremiCtrl', function($scope, $localStorage, $ionicPopup, $location, $window) {


    $scope.ribe = ["Saran", "Stuka", "Som"];

    var ribice = [];

    $scope.spremi = function(t_tezina, m_mamac){

          console.log(t_tezina);
          console.log(m_mamac);
          var podaci = {Tezina: t_tezina, Mamac: m_mamac};  
          console.log(podaci);
          ribice.push(podaci);

          $localStorage.fish = ribice;
          console.log(ribice);

    var confirmPopup = $ionicPopup.alert({
    title: 'Saved'

         });
       };

 html

<ion-view view-title="Browse">
      <ion-content>
      <select id="vrstaribe" ng-model="selekt" ng-options="r as r for r in ribe" selected>
       <option value="">Fish Type</option> 
      </select>
       <label class="item item-input">
       <input id="tezina" type="number" placeholder="Weight" ng-model="podaci.tezina">
       </label>
       <label class="item item-input">
       <input id="mamac" type="text" placeholder="Bait" ng-model="podaci.mamac">
       </label>
       <button class="button button-positive" ng-click="spremi(podaci.tezina, podaci.mamac)">Save</button>
       <button class="button button-positive" ng-click="retrieve()">Show</button>
       <button class="button button-positive" ng-click="reset()">Reset</button>

      </ion-content>
    </ion-view>

Answer №1

For optimal performance, make sure to reset all values at the conclusion of your method, following any other operations, in order to prepare for the next invocation.

$scope.saveData = function(weight, bait){
    console.log(weight);
    console.log(bait);
    var data = {Weight: weight, Bait: bait};  
    console.log(data);
    fishData.push(data);

    $localStorage.fish = fishData;
    console.log(fishData);

    var confirmPopup = $ionicPopup.alert({
        title: 'Data Saved'
    });

    // Reset variables here.
    data.Weight = '';
    data.Bait = '';
};

Additionally, consider utilizing $log.debug() (or similar functions) instead of console.log(). This allows you to easily disable debug output by configuring the $logProvider, particularly valuable when transitioning from development to production environments.

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 read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

Submit your document using the connect-form tool

I ran into an issue while trying to upload a file using connect-form. I found that in order to successfully upload the file, I had to disable the bodyParser() function in my app.js. If I kept bodyParser() enabled, it would result in an error: loading forev ...

Determine the date and time based on the number of days passed

Hey there! I have a dataset structured like this: let events = { "KOTH Airship": ["EVERY 19:00"], "KOTH Castle": ["EVERY 20:00"], Totem: ["EVERY 17:00", "EVERY 23:00"], Jum ...

The React Testing Library encountered an error: TypeError - actImplementation function not found

Encountering a TypeError: actImplementation is not a function error while testing out this component import React from 'react'; import { StyledHeaderContainer, StyledTitle } from './styled'; export const Header = () => { return ( ...

Error encountered while trying to display the react-bootstrap table

I am having trouble rendering sample data using react-bootstrap tables. Every time I try, I encounter the error: TypeError: Cannot read property 'filter' of undefined I've searched on various platforms and visited multiple links, but I ca ...

The input value remains a string even after it has been converted to a float

I can't figure out where I'm going wrong. I'm attempting a simple task: getting user input, converting it to a float, and performing a calculation with that value. However, all I keep getting is NaN. Here's the input (I normally replac ...

Encountered an error when creating my own AngularJS module: Unable to instantiate

Attempting to dive into TypeScript and AngularJS, I encountered a perplexing error after following a tutorial for just a few lines. It appears that there may be an issue with my mydModule? angular.js:68 Uncaught Error: [$injector:modulerr] Failed to inst ...

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

Unable to pass the $rootScope variable to the following function in AngularJS 1.x

I'm facing an issue that I can't seem to solve. It appears that a variable in $rootScope is not being assigned when I call the next function, but isn't that the purpose of a Promise (.then)? I am using AngularJS v1.6.4 and NodeJS, however, ...

Issues with JQuery script causing inconsistency in checking checkboxes

My code includes two functions designed to check and uncheck all checkboxes with a specific class. Initially, the functions work as expected but upon subsequent attempts to run them, the checkboxes do not function properly. Instead, the HTML code seems to ...

What is the best way to retrieve a response from a PHP file as an array through Ajax?

Seeking assistance in retrieving a complete address by entering the postal code in an HTML form textbox and clicking a button. The setup involves two files - one containing the ajax function and the other housing the PHP code. Uncertainty looms over whethe ...

Error: Unable to locate module '@/components/Header' in Next.js project

I'm currently facing an issue while working on my Next.js project. The problem arises when I attempt to import a component into my 'page.js' file. In the 'src' folder, I have a subdirectory named 'components' which contai ...

Ascending and descending functions compared to Ext.getCmp()

I'm feeling a bit lost trying to figure out which method to use when using grep object - should I go with up(), down(), or Ext.getCmp(ID)? Personally, I find it simpler to assign an ID to the object and then retrieve it using Ext.getCmp('ID&apos ...

The regex string parameter in node.js is not functioning properly for matching groups

The String.prototype.replace() method documentation explains how to specify a function as a parameter. Specifying a string as a parameter The replacement string can contain special patterns for inserting matched substrings, preceding and following portion ...

How to Disable a Button with JavaScript in a Vue.js Application Without Using jQuery

I'm currently in the process of transitioning old jQuery code to JavaScript for a Vue.js application. function DisableSubmit() { submitButton.prop('disabled', true); submitButton.attr('data-enabled-value', submitButton.val ...

How can I incorporate a material-ui component using innerHTML?

Hi there, I'm new to using React and StackOverflow. I've been attempting to incorporate a Button component from material-ui by utilizing document.getElementById.innerHTML. However, upon the appearance of the button, the material-ui styling fails ...

Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink? Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve. I thought about using tooltips in Bootstrap, but I'm not sure if it ...

Utilizing Express.js for reverse proxying a variety of web applications and their associated assets

I am looking to enable an authenticated client in Express to access other web applications running on the server but on different ports. For instance, I have express running on http://myDomain and another application running on port 9000. My goal is to re ...

Utilizing express and socket.io for seamless cross-domain communication

Is there a way to activate cross-domain functionality for express.io? I require it for a Cordova application, but when using Chrome, I get an error message saying "No 'Access-Control-Allow-Origin' header is present on the requested resource. Orig ...

Exploring the FunctionDirective in Vue3

In Vue3 Type Declaration, there is a definition for the Directive, which looks like this: export declare type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>; Most people are familiar with the ObjectDirectiv ...