Clearing input fields after entering information

Is there a way to automatically assign the value from a scanner input to a variable in an input box and clear it for the next input?

HTML

<ion-view hide-nav-bar="true">
  <ion-content class="padding"><br>

    <label class="item item-input">  
      <input type="number" ng-model="code" id="code" name="theInput" auto-focus>
    </label>

    <div class="tt"><br><br>
        Code   : <span class="art">{{code}}<br><br></span>
    </div><br>

    <button ng-click="clear(code)" class="button button-positive">
     Clear
    </button>
  </ion-content>
</ion-view>

JavaScript

 .controller('PriCtrl', function($scope) {

    window.onload = function() {
        document.getElementById("code").focus();
    };


    $scope.clear= function(code){

    $scope.val = code;

    document.getElementById("code").value = '';

}

Answer №1

only a single line alteration

$scope.clear= function(value){   
 $scope.val = value;
 $scope.value = ''; //ng-model of input is value
}

Answer №2

Exploring the mechanics of Angular data binding can be insightful.

When a variable is within the scope, the view can access it. Any modifications to the variable's value in the controller will automatically update the view and vice versa.

Avoid heavy usage of jQuery and refrain from manipulating the DOM directly from the controller. For example, this code snippet:

document.getElementById("code").value = '';

is functionally equivalent to $scope.code = '';


Check out this Plunker for a demonstration: http://plnkr.co/edit/u3loqpxYIBMX65O9FXGD?p=preview

Let's create an array to store the input:

JavaScript:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

  $scope.selected = [] ;
  $scope.code = null ;
  $scope.next = function(){
    $scope.selected.push( $scope.code );
    $scope.code = null

  }
});

HTML:

<body ng-controller="MainCtrl">

 <ion-view hide-nav-bar="true">
  <ion-content class="padding"><br>

    <label class="item item-input">  
      <input type="number" ng-model="code" id="code" name="theInput" auto-focus>
    </label>

    <div class="tt"><br><br>
        Code   : <span class="art">{{code}}<br><br></span>
    </div><br>

    <button ng-click="next()" class="button button-positive">
      scan next
    </button>
  </ion-content>
</ion-view> 

<pre>{{selected|json}}</pre>


</body>

Answer №3

When working with Angular, it's best to avoid using the

document.getElementById("code").value = '';
method.

A more efficient approach would be to monitor the changes in the code variable. If a new value is detected, you can transfer it to a list of values and then clear the value from the code variable.

.controller('PriCtrl', function($scope) {
    $scope.$watch('code', function(newVal, oldVal) {
        if (newVal != '') {
            $scope.codelist.push(newVal);
            $scope.code = '';
        }
    });
}

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

When using v-select to search for items, the selected items mysteriously vanish from

I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...

Managing extensive amounts of data with server-side scripting in a Datatable

I am exploring the use of the datatable plugin to effectively manage a large amount of data. Currently, I am interested in implementing "server side processing in datatables" with the help of server-side scripting. Since I have limited experience with AJA ...

Verifying the URL to determine if it includes the specific string needed to modify the Jade theme in

I am currently exploring ways to check if a URL string is present in an express application, in order to initiate a theme change. At the moment, I have a basic router.get function: router.get('/', function(req, res, next) { res.render(' ...

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

I'm currently working on a unit test to ensure that a user can't submit a form until all fields have been filled out. The test itself is functioning correctly and passes, but the problem arises when the default behavior of form submission causes ...

Ways of extracting specific information from a JSON file with the help of jQuery

I am currently attempting to parse a JSON file that is stored locally on my system using jQuery. I am specifically interested in retrieving certain data from the file, which is structured like this: {"statements":[{"subject":{"uriString":"A","localNameIdx ...

Guide to mocking the 'git-simple' branchLocal function using jest.mock

Utilizing the simple-git package, I have implemented the following function: import simpleGit from 'simple-git'; /** * The function returns the ticket Id if present in the branch name * @returns ticket Id */ export const getTicketIdFromBranch ...

The argument 'TabsCtrl1' is throwing an error as it is not recognized as a valid function and is showing as

I have encountered a problem with my controller, and I am seeing the following error message: Error: [ng:areq] Argument 'TabsCtrl1' is not a function, got undefined http://errors.angularjs.org/1.3.0-beta.11/ng/areq?p0=TabsCtrl1&p1=not%20a%20 ...

How can I display or hide an ion-icon in the ion navbar based on internet connectivity status?

Can anyone help me with showing or hiding ion-icons based on internet connectivity status? I am a bit confused about this, so any assistance would be appreciated. Thank you. I have implemented the following in HTML using ngIf function: <ion-buttons end ...

Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Having trouble with the scroll functionality in my skrollr.js animations. Everything works fine on desktop, but when I checked the rendered HTML in the browser console, I noticed that there are two divs with the same id "skrollr-body". One is empty and the ...

Express POST request body is required

I am starting to learn nodejs and express, and while reviewing some code I found this interesting snippet. Can someone please explain what it means and how I can send a POST request to it using cURL? There are no specified data fields. app.post('/&apo ...

Tips for utilizing a protractor ExpectedCondition by hand

Recently diving into Protractor, I'm aiming to set up an expect statement like so: expect(elementIsVisible).toBe(true); While exploring the EC (expected conditions) section in Protractor, specifically EC.visibilityOf, I find myself unsure about the ...

What is the best way to initiate an Airflow Dag from a NodeJS environment?

Is it feasible to remotely trigger the AirFlow Dag that updates snowflake tables from NodeJS in our specific scenario? ...

The socket io server connection triggers repeatedly

Currently, I am working on developing a simple game using next.js and node.js. However, when I test the game, I notice that there are multiple "connected" logs being displayed. Even though I have only one client (with just a single tab open in Chrome), the ...

I am encountering an issue with my function where I aim to prevent the creation of a node using duplicate coordinates

Trying to avoid creating a node with existing coordinates, I implemented a check in my code. The check is supposed to determine if there are any nodes with the same coordinates already present. However, it seems that the check is not working as expected an ...

Competition among fetch requests

I am currently developing a tracker that is designed to gather data from our clients' websites and send it to our API using fetch requests when site users navigate away from the page. Initially, I planned to utilize the beforeunload event handler to ...

Combining Django and chartjs to create stacked multiple charts

Hey there! I'm working on a Django application and using Chart.js to create bar charts. I encountered an issue where, after generating a new chart with a button click, the old one still lingers behind when hovering over the new chart. I have a suspici ...

Identifying and implementing page language in nextJS: Solving the ReferenceError "window is not defined" issue

I am currently working on developing a website that can automatically detect the user's country and set the language accordingly. In React, I usually achieve this by using window.navigator.language. Here is a snippet of the code: import * as pt from ...

What is the best way to extract a single value from my directive scope?

I am working with an AngularJS directive that has a non-isolated scope, but I have one variable, "isOpen," that needs to be isolated within the directive. Consider the following example: app.directive('myDir', function() { return { r ...

When calling an API endpoint, nodeJS is unable to access the local path

I've encountered a strange issue with my code. When I run it as a standalone file, everything works perfectly fine. However, when I try to utilize it in my API endpoint and make a request using Postman, it doesn't seem to function properly. What ...

Creating a jQuery multiple image preview feature is a simple and effective way to

Looking to implement a single image upload preview function in jQuery? Want to modify it to allow for multiple image uploads with separate boxes? Check out the HTML script below. <!DOCTYPE html> <html> <head> <title></title> ...