Question

好的，我知道这个问题对你来说可能是非常重要的，但我真的无法让它发挥作用。我的HTML代码在Codepen中正常工作，但是当我在我的应用模板中使用它时，它会混乱。我尝试了很多CSS选项，但没有一个工作..

我的代码在Codepen中的外观以及它在我的应用中的外观：

<div class="item range">
  <div>
  <label>1 Min.</label>
  <input id="zeitRange" name="a" type="range" min="1" max="60" value="5" step="1" oninput="showValue(this.value)" onchange="showValue(this.value)" src="controller.js">
  <label>60 Min.</label>
    </div>
  <div>
    <label>Reisezeit: </label>

  <span id="rangeValue">5</span>
  </div>
</div>

它在我的应用中的实际效果如何：

http://imgur.com/a/ZMSAz

这是我的整个HTML模板：

<script id="templates/search.html" type="text/ng-template">
    <ion-view view-title="Datenerfassung">
      <ion-content id="datenContent" scroll="true" class="has-header has-footer" ng-controller="DataCtrl">
        <div class="list">

          <div class="item item-divider">
            Bestimme deinen Startpunkt
          </div>
          <!-- Adressen Input Feld -->
           <label class="item item-input item-floating-label">
             <span class="input-label">Startpunkt in Adressform</span>
             <input id="address" type="text" placeholder="Startpunkt in Adressform">
           </label>
           <button id="locate" class="button button-balanced" ng-click="locate()">Aktuellen Standort verwenden</button>

           <!-- Item Divider -->
           <div class="item item-divider">
            Bestimme deine Reisezeit
           </div>
           <!-- Zeit Input Slider -->
           <div class="item range">
           <div>
            <label>1 Min.</label>
            <input id="zeitRange" name="a" type="range" min="1" max="60" value="5" step="1"
                   oninput="showValue(this.value)" onchange="showValue(this.value)" src="controller.js">
            <label>60 Min.</label>
            </div>
            <div>
            <label>Reisezeit: </label>
            <span id="rangeValue">5</span>
            </div>
          </div>


           <button id="t_button" class="button button-balanced" ng-click="set_five()">5 Min.</button>
           <button id="t_button" class="button button-balanced" ng-click="set_ten()">10 Min.</button>
           <button id="t_button" class="button button-balanced" ng-click="set_fifteen()">15 Min.</button>
           <button id="t_button" class="button button-balanced" ng-click="set_twenty()">20 Min</button>

        </div>
        <!-- Fortbewegungsmittel Toggle Liste -->
        <div class="item item-divider">
          Mit welchem Fortbewegungsmittel <br />
          möchten Sie die Umgebung erkunden?
        </div>

        <ion-radio class="radio" ng-model="$parent.move" value="walk">Zu Fuß</ion-radio>
        <ion-radio class="radio" ng-model="$parent.move" value="transit">Tram</ion-radio>
        <ion-radio class="radio" ng-model="$parent.move" value="car">Auto</ion-radio>
        <ion-radio class="radio" ng-model="$parent.move" value="bike">Fahrrad</ion-radio>

        <div class="item item-divider">
          Welche Arten von Standorten <br/> möchtest du sehen?
          </div>
        <div class="list">
          <ion-checkbox id="checkbox" ng-repeat="item in art_liste" ng-model="item.checked" ng-checked="item.checked">{{item.text}}</ion-checkbox>
          </div>

        <!-- Button zum loslegen -->
        <div style="text-align:center;">
        <button id="erkunden" ui-sref="map" class="button button-balanced" ng-Click="setData()">ReachIt!</button>
        </div>
      </ion-content>
      <ion-tabs class="tabs-balanced tabs-icon-top">
    <ion-tab ui-sref="home" title="Home" icon="ion-home"></ion-tab>
    <ion-tab ui-sref="faq" title="FAQ" icon="ion-help-circled"></ion-tab>
    <ion-tab ui-sref="about" title="About" icon="ion-information-circled"></ion-tab>
    <ion-tab ui-sref="impressum" title="Impressum" icon="ion-clipboard"></ion-tab>
  </ion-tabs>
    </ion-view>
 </script>

我感谢任何帮助。最好的问候，朱利安

在<input />下订购<span>

0 个答案: