How I put a value in a input?

ionic-v1
1

I have an empty input, when I use a barcode scanner want that value is displayed in the input is not as worse. This is my code:

Scanner.html

<ion-view title="Search">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Camera</h1>
  </ion-content>
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="BarcodeScanner">
        <button class="button" ng-click="scanBarcode()">EAN SCANNEN</button>
        <label class="item item-input">
          <input type="text" name="test" id="test">
        </label>
      </ion-content>
    </ion-pane>
</ion-view>

app.js

var exampleApp = angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})
exampleApp.controller("BarcodeScanner", function($scope, $cordovaBarcodeScanner) {
 
    $scope.scanBarcode = function() {
        $cordovaBarcodeScanner.scan().then(function(imageData) {
            alert(imageData.text);
            console.log("Barcode Format -> " + imageData.format);
            console.log("Cancelled -> " + imageData.cancelled);
        }, function(error) {
            console.log("An error happened -> " + error);
        });
    };
 
});

I want to get the value that I receive and put it in the input just after this alert in app.js:

alert(imageData.text);

Someone could help me?

Thank you in advance

2

This is not a ionic related questions. Is more an angular related question… But any way.

Scanner.html

<ion-content ng-controller="BarcodeScanner">
    <button class="button" ng-click="scanBarcode()">EAN SCANNEN</button>
    <label class="item item-input">
      <input type="text" name="test" id="test" ng-model="code">
    </label>
  </ion-content>

Input contains an attribute (ng-model) with a value “code” that is the “var” used in controller

app.js

exampleApp.controller(“BarcodeScanner”, function($scope, $cordovaBarcodeScanner) {

$scope.scanBarcode = function() {
    $cordovaBarcodeScanner.scan().then(function(imageData) {
        alert(imageData.text);
        //Simple inject the var in the $scope var
        $scope.code = imageData.text; //where "code" is the value from ng-model (basic data-binding)
        console.log("Barcode Format -> " + imageData.format);
        console.log("Cancelled -> " + imageData.cancelled);
    }, function(error) {
        console.log("An error happened -> " + error);
    });
};

});

You mus take a look here: https://docs.angularjs.org/guide/databinding

1 Like
3

Thank you for your answer, but I found a solution…

document.getElementById('test').value = imageData.text;
4

@demonk7 Your solution is not Angular-like. Angular is there so that You don’t have to look for DOM elements by ID, so exactly what @soutlink said.

5

This stackoverflow thread has some excellent advice and reasoning why direct manipulation like this can cause issues later on (I appreciate you’re not using jQuery here, but the principle is the same)

angularjs for jQuery users

it really is worth getting used to referencing a separate model rather than directly peeking at the DOM - it can cause all sorts of hard-to-debug side-effects later on.

1 Like
6

Can you help me with something similar since i’m rather new.
I want to spare the user the trouble of filling the address if he decide to share his location for the delivery and therefore this is a GPS Coordinates function to fill 3 fields (long/lat and a combined field)

// CAPTURE ADDRESS GPS LONG/LAT******************
function getLocationConstant() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
} else {
alert(“Sorry, We couldn’t get your Geolocation, Please fill the address manually”);
}
}

// If we have a successful location update
function onGeoSuccess(event) {
document.getElementById(“Latitude”).value = event.coords.latitude;
document.getElementById(“Longitude”).value = event.coords.longitude;
document.getElementById(“Position1”).value = event.coords.latitude + ", " + event.coords.longitude;

}

// **************** MY FORM **********************************

Latitude 
    <ion-item class="item-input item-stacked-label">
      <span class="input-label">Longitude</span>
      <input type="text" ng-model="vm.form.zipCode" name="Latitude"  />
    </ion-item>

    <ion-item class="item-input item-stacked-label">
      <span class="input-label">Position</span>
      <input type="text" ng-model="vm.form.zipCode" name="position1"  />
      **<button class="button" ng-click="getLocationConstant()">Add My GPS Location</button>**
    </ion-item>

Would be nice to have these hidden and shown if he decides to share his GPS somehow and then he would have to fill the data manually.

Any help would be highly appreciated :slight_smile:
Quite frankly i’m loving the platform