将函数结果添加到离子 2 表单字段中

Question

我构建了一个简单的 ionic 2 表单，可以很好地提交。但我希望将查找位置功能的结果添加到表单字段中。以前我使用 document.getElementByID("lat").value = position.coords.latitude 通过 jQuery 形式完成此操作。在我的代码中，我得到了我的 lats 和 longs 变量，但现在我试图弄清楚如何获取结果并将它们输入到 data.lat 和 data.lng ion-inputs

HTML

<ion-content padding class="formstuff">

  <ion-list>

    <ion-item>
      <ion-input type="text" name="lat" placeholder="Latitude" [(ngModel)]="data.lat"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input type="text" name="lng" placeholder="Longitude" [(ngModel)]="data.lng"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input type="text" name="message" placeholder="message" [(ngModel)]="data.message"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input type="text" name="username" placeholder="Username" [(ngModel)]="data.username"></ion-input>
    </ion-item>

    <button (click)="getLocation()" class="button button-full button-calm">Get Location</button>

    <button block (click)="submit()">Submit to server</button>

  </ion-list>

</ion-content>

js

import {Page} from 'ionic/ionic';
import {Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Page({
  templateUrl: 'build/pages/formstuff/formstuff.html',
})
export class FormstuffPage {
  constructor(@Inject(Http) http: Http) {
    this.data = {};
    this.data.message = '';
    this.data.lat = '';
    this.data.lng = '';
    this.data.response = '';
    this.http = http;
  }

  submit() {
      let link = 'http://api.php';
      let data = JSON.stringify({message: this.data.message, lat: this.data.lat, lng: this.data.lng});
      this.http.post(link, data)
      .subscribe(data => {
        this.data.response = data._body;
      }, error => {
          console.log("error");
      });
    }

  getLocation() {
    let options = {timeout: 2000, enableHighAccuracy: false};
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(geoLatlng, geoErrors, options);
    } else {
        console.log "conection error"
    }
  }

  function geoLatlng(position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      console.log ('cordinates'latitude,longitude);
  }

  function geoErrors(error) {
  }
}

Answer 1

我最终使用了 ionic-native，它减少了代码并且工作得非常快

html

<ion-navbar *navbar>
<ion-title>Time Event</ion-title>
</ion-navbar>

<ion-content padding class="time-event">
    <ion-list>
        <ion-item>
            <ion-input type="text" name="lat" [(ngModel)]="data.lat"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" name="lng" [(ngModel)]="data.lng"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="textarea" name="message" placeholder="Type message here..." [(ngModel)]="data.message"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" name="username" placeholder="Name here..." [(ngModel)]="data.username"></ion-input>
        </ion-item>
        <button block (click)="submit()">Submit to server</button>
    </ion-list>

    <ion-card>
        <ion-card-header>
            Response
        </ion-card-header>

        <ion-card-content>
            <b>{{data.response}}</b>
        </ion-card-content>
    </ion-card>
</ion-content>

ts

import {Page, Platform} from 'ionic-angular';
import {Geolocation} from 'ionic-native';
import {Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Page({
    templateUrl: 'build/pages/time-event/time-event.html',
})

export class Time {
    constructor(@Inject(Http) http: Http, platform: Platform) {
        this.data = {};
        this.data.username = '';
        this.data.message = '';
        this.data.response = '';
        this.http = http;
        platform.ready().then(() => {
            Geolocation.getCurrentPosition().then((resp) => {
                let lat = resp.coords.latitude;
                let lng = resp.coords.longitude;
                this.data.lat= lat;
                this.data.lng = lng;
            });
        });
    }

    submit() {
        let link = 'http://api.php';
        let data = JSON.stringify({username: this.data.username, message: this.data.message, lat: this.data.lat, lng: this.data.lng});
        this.http.post(link, data)
        .subscribe(data => {
            this.data.response = data._body;
        },
            error => {
                console.log("error");
            });
    }
}

将函数结果添加到离子 2 表单字段中

adding result of function into an ionic 2 form field

angularjs

ionic2