將函數的結果添加到離子2形式字段

Question

我已經構建了一個簡單的離子2形式，提交罰款。但我希望將查找位置函數的結果添加到表單字段中。以前我用document.getElementByID（「lat」）。value = position.coords.latitude來完成這個jQuery表單。在我的代碼，我得到我的拉特和渴望變量，但現在我想弄清楚如何採取結果並將其輸入到data.lat和data.lng離子輸入

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

我結束了使用離子本土其中減少的代碼和作品真的快

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"); 
      }); 
    } 
}