Assigning null values, or initializing values in AngularJS

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

Empty fields:

https://i.sstatic.net/JDTZA.jpg

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

https://i.sstatic.net/T5iKc.jpg

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

convert a string to JSON format using Node.js Express

Currently, I am viewing some string data in a browser that has been processed using python-node js express. The data looks something like this: In order to manipulate the data more effectively, I would like to convert it into JSON format that follows this ...

Tips for utilizing vulnerable web scripts on SSL-enabled pages

After implementing SSL to secure my pages, I encountered an issue where one of my scripts no longer functions properly. Specifically, I had a script on my page that was used to display the visit count from this website. Previously, it was functioning fla ...

Is it possible to configure the Eclipse Javascript formatter to comply with JSLint standards?

I'm having trouble setting up the Eclipse Javascript formatting options to avoid generating markup that JSLint complains about, particularly with whitespace settings when the "tolerate sloppy whitespace" option is not enabled on JSLint. Is it possible ...

Issue with VueJS/Nuxt: When using this.$router.push, the wrong template is being returned to the <nuxt-link> tag

Currently, I'm developing a search feature that takes the value from a select box and sends the user to the appropriate page. However, there seems to be an issue where the wrong template is being called upon rendering, resulting in no content being di ...

Issue with Angular UI Router arises when state cannot be resolved upon page reload

I'm currently facing an issue with routing that I mentioned in the title. Even though my route is functioning, it encounters difficulties when the page is reloaded. Below is the routes object: { state: 'locations', config: { ...

Utilizing JavaScript and JSON to Retrieve Array Elements by Key Names as Indexes

I'm looking for a way to access elements in an array using unique key names instead of numerical indexes. Specifically, I'm developing a Discord bot where each server has its own settings. When a message is sent on a server, I need to retrieve th ...

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

When it comes to mapping object values with all primitive types, the process is quite straightforward: type ObjectOf<T> = { [k: string]: T }; type MapObj<Obj extends ObjectOf<any>> = { [K in keyof Obj]: Obj[K] extends string ? Obj[K] : ...

ng-repeat isn't displaying the data

I have always been comfortable using the ng-repeat in Angular, but this time I seem to be facing a problem. I am trying to populate my DOM with data from a JSON file, but for some reason, the fields are not displaying as expected. Is there something wrong ...

Guide to building a multi-dimensional array from a flat object

My endpoint is outputting data in a specific format: const result = [ {id: 4, parentId: null, name: 'Fruits & Veggies'}, {id: 12, parentId: 133, name: 'Sanguinello'}, {id: 3, parentId: 4, name: 'Fruits'}, {id: 67, ...

Connecting a text input in a nested component to the data passed down from its parent component in VueJS

My VueJS setup involves a child component sending data to a parent component, which then tries to route the data to a sibling of the child to create new components. I'm using a dictionary to group the data and push it into an array. The array is then ...

Utilize the precise Kendo chart library files rather than relying on the kendo.all.min.js file

My application currently uses the Kendo chart, and for this purpose, it utilizes the "kendo.all.min.js" file which is quite large at 2.5 MB. To optimize the speed performance of the application, I decided to only include specific Kendo chart libraries. In ...

Monitor the x and y positions for platformer game interactions using only JavaScript and jQuery

I am currently working on a 2D platformer game as part of my college project alongside my friends. We are using jQuery and pure JS for development. So far, we have been able to move the character left and right using jQuery's animate function, and ena ...

Utilizing FCKEditor to incorporate dimensions of width and height into image elements

I'm currently facing an issue while attempting to specify width and height for images within an old WYSIWYG FCKEditor. The challenge arises when trying to retrieve the naturalWidth/naturalHeight properties, as they return values of 0. What could I be ...

Striped shadows in React Three Fiber

Currently in the process of developing a basic 3D object viewer website using Next.js and React-Three-Fiber. Everything was running smoothly until I added a DirectionalLight instance and attempted to make all meshes receive shadows. https://i.sstatic.net/ ...

Exploring the dynamic duo of MongoDB and GridFS

We currently manage a large-scale project that accommodates thousands of users daily. Our database system is MySQL, but we are considering transitioning to MongoDB along with GridFS. Is it feasible to utilize MongoDB and GridFS for projects on this scale? ...

Use the jQuery .GET() method two times to retrieve data and obtain the outcomes

My code involves making a series of GET calls where the returned data from one call is used in another call before returning the final results. However, I want to ensure that my program waits until all the data is retrieved. This is what I have come up wi ...

The Angular bootstrap datepicker does not correctly format the date value stored in the ng-model variable

I am currently utilizing a bootstrap date-picker in my Angular application. However, whenever I select a date from the date-picker, the underlying ng-model that I have bound gets updated. I would like that ng-model to be in the date format 'MM/dd/yyyy ...

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

Is there a way to navigate to a different page in AngularJS without the need to refresh the current page?

I am searching for a method to redirect to a different page without reloading the current one. Let me describe my scenario. I have a user login requirement. If a user is not logged in and tries to access the URL directly (e.g. "localhost/sample.html") th ...

The importance of variables in Express Routing

I'm really diving into the intricacies of Express.js routing concepts. Here's an example that I've been pondering over: const routes = require('./routes'); const user = require('./routes/user'); const app = express(); a ...