Pobieranie wartości range i dzielenie poprzez wartość Ionic

Dla specjalistów Programowanie
#1

Witam

W jaki sposób mogę pobierać wartość zaznaczoną w polu range i dzielić poprzez druga ale wpisaną wartość?

 <ion-range min="5000" max="70000" step="100" snaps="true" [(ngModel)]="distance" color="dark">
        <ion-icon range-left small color="dark" name="test"></ion-icon>
        <ion-icon range-right color="dark" name="test"></ion-icon>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-input type="number" min="0" max="100" placeholder="Dzielenie"></ion-input>
    </ion-item>
  </ion-list>

Jak się do tego zabrać?

#2

Jeśli wynik potrzebujesz wyświetlić użytkownikowi to przy pomocy JavaScriptu. Jeśli nie to możesz to robić już na backendzie.

#3

Potrzebuje wyświetlić użytkownikowi. Jakich funkcji mogę użyć do tego ? Czyli do ion-range i ion-item list muszę przypisać jakieś ID?

#4

Zależnie od potrzeb.

querySelector lub querySelectorAll - zależnie od potrzeb.
Ustawioną wartość pobierasz przy pomocy właściwości value.
Wynik wyświetlasz zależnie od tego jak i w jakim obiekcje DOM chcesz go wyświetlić.

#5

OK. Czyli robię tak do ion-range przypisuje id #range a do ion-item list #list i potem

 var container = document.querySelector("#range", "#list");

function (range, list){
return (Math.round(a/b));
}

Czy źle to rozumiem?

#6

Mniej więcej tak, niestety tylko mniej. Lepiej byłoby gdybyś używał funkcji zgodnie z tym jak działa, uzyskasz w tedy lepsze efekty. Tutaj masz opis i przykłady użycia querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

#7

OK. Ale za pomocą querySelector tylko wskazujemy elementy ale jak potem podzielić i wyświetlić te wartości ?

#8

Co Ty chcesz dzielić? Pobierasz konkretny obiekt dom w twoim przypadku inputa i sprawdzasz jego value.

#9

Chce dzielić wartość range z wartością input

#10

No to dzielisz pobrane value z range przez wartość pobraną z input przy pomocy value. Jeśli input nie jest typu number tylko text to ewentualnie musisz zrobić konwersję do inta i obsłużyć ewentualne błędy podczas wprowadzania wartości przez użytkownika.

#11

Wartości są typu number. A czy możesz mi pomóc jak powinno wyglądać takie pobieranie i dzielenie wartości? Nie wiem jak się do tego zabrać.

#12

mniej więcej tak:

let quotient = document.querySelector(".specyfic .selector #to-range").value / document.querySelector(".other .selector #to-number").value;
#13

Chyba nie po to używa się frameworka opartego na Angularze, żeby ręcznie dobierać się do DOM-a.

Wartość z pierwszego inputa binduje ci się do pola distance w kontrolerze. Musisz w podobny sposób dołożyć model do do drugiego inputa (np. [(ngModel)]=“something”). Potem możesz zwyczajnie zewaluować wyrażenie w HTML-u - {{ distance / something }}

Generalnie, mimo zapewnień twórców, bez chociaż średniej znajomości Angulara z Ionikiem nie zawalczysz.