離子-年齡數字微調器組件

Question

在混合移動應用程序上工作時，遇到此問題。

我目前正在左側菜單中添加新項目，其中一個新組件是年齡編號（最小：18，最大：65）微調器。 在網絡和Ionic文檔中進行搜索，但沒有找到任何與之相似的組件。

年齡數字微調器

目前，我只有標簽作為數字輸入字段，僅作為占位符。

<div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>

它看起來像這樣： 當前設計

我的子菜單模板如下所示：

<ion-list ng-if="(menuMatch && !menuMain)" class="slide-right-left">
      <div class="item item-divider main-menu-divider">
        {{ "distance" | translate }}
      </div>
      <div class="item range">
        <input type="range" name="distance" min="0" max="200" value="{{rangeValue}}" ng-model="rangeValue"
               step="10">
        {{ rangeValue }}
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "age" | translate }}
      </div>
      <div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "match_with" | translate }}
      </div>
      <div class="match-options">
        <ion-radio class="man-option" ng-model="choice" ng-value="'men'">Men</ion-radio>
        <ion-radio class="woman-option" ng-model="choice" ng-value="'women'">Women</ion-radio>
      </div>

      <div href="" ng-click="saveMatchOptions()">
        <button class="button save-options">
          {{ "save_options_btn" | translate }}
        </button>
      </div>
    </ion-list>

如果框架中沒有類似的內容，我可以嘗試制作自定義html組件，並使用Javascript添加一些功能，並使用CSS對其進行樣式設置，以創建類似的內容。

Answer 1

不確定這里的問題是什么，但是由於我沒有找到達到我想要的生產水平的組件（在UX或定制方面也不是），因此我創建了當前在實時移動應用中使用的新指令。 數字選擇器/微調器是作為屬性指令實現的，因此請堅持使用任何DOM元素或您現有的輸入字段（只需記住將其CSS設置為只讀），瞧吧，解決了很多麻煩（輸入驗證，用戶流失，等等。該指令的作用與您期望的一樣，具有本機設備中的拖動功能，外觀優美，高度可自定義以及許多其他功能。 看看這個！ http://market.ionicframework.com/plugins/ion-number-picker （感謝@strttn的鏈接更新）