angular 中的 NoUiSlider - 绑定到数字数组

Question

我正在尝试使用 NoUiSlider (Yankovsky directive)

编辑数字数组

我已经成功创建了基本功能，但我在绑定方面遇到困难。

我的数组是这样的：

vm.myNumbers = [1, 2, 6];

但此指令要求将选项设置为整个对象：

vm.options = {
  start: 3,
  connect: 'lower',
  range: {
    min: 0,
    max: 10
  }
};

我想为数组的每个元素创建滑块并自动更新它的值，如下图所示。

问题是 NoUiSlider 指令没有值的独立绑定。

这是显示我当前代码的 Plunker：http://plnkr.co/edit/ljm96tdcGgvwo3Hnayfk?p=preview

我可以绑定数组中的项，但保留该选项对象中的其余选项吗？

Answer 1

您可以参考这个plunker代码... http://plnkr.co/edit/4VgDnm 您将相同的 options 绑定到每个滑块，因此会出现问题。我已经更新了您的代码，这可能会对您有所帮助。

Answer 2

我是 nouislider-angular 作者。我为您的问题添加了示例解决方案 http://yankovsky.github.io/nouislider-angular/examples/#/multiple-sliders-binding.

我使用 $scope.$watchCollection 检查滑块的值是否有任何变化：

$scope.$watchCollection(function() {
    return that.slidersOptions.map(function(options) {
        return options.start;
    })
}, function(newValue) {
    that.numbers = newValue;
});

如果对您有用，请告诉我！

angular 中的 NoUiSlider - 绑定到数字数组

NoUiSlider in angular - bind to array of numbers

angularjs

nouislider