jquery - 角度範囲スライダー jQuery プラグイン

Question

私はAngularアプリケーションでこの素晴らしいスライダーを使用していますhttp://refreshless.com/nouislider/download

このスライダーは、jQuery UI Slider に比べて小さく、タッチコントロールが組み込まれているため、非常に気に入っています。それは本当にとてもいいです。

そこで、データリストをフィルタリングしてうまく機能するディレクティブを作成しました。私が知っておく必要があるのは、その場で範囲の値を変更する方法です。そのため、データが入ってくると、新しい低値または高値を取得して範囲を更新します。

これは、私が使用しているディレクティブの簡単で基本的なプランカーです

これがAngularのものなのかプラグインのものなのかはわかりません。新しい値を取得するたびにディレクティブをインスタンス化できますか?

だから、あなたの考えを聞きたいです。

乾杯トム

score 0 · Accepted Answer

最良のオプションは、スライダーの範囲をディレクティブのスコープ変数として持つことです。次に、この変数で発生する変更をリッスンし、スライダーを更新します。

これは、次の方法で実現できます。

return {
  restrict: 'A',
  scope: {
    values: '=ngModel',
    boundaries : '=' // the range of the slider
  },

そして、変更をリッスンする部分:

scope.$watch('boundaries', function(oldVal, newVal) {
  if(scope.slider !== null) {
    remove();
  }
  create();
});

ここで実際の例を見ることができます

PS : 残念ながら、noUiSlider の範囲を簡単に更新する方法はありません。そのため、ディレクティブの要素内に内部 div を作成することになります。

1 に答える 1