0

我正在尝试使用 NoUiSlider （Yankovsky指令）对数字数组进行编辑

我已经设法创建了基本功能，但我正在努力绑定。

我有这样的数组：

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

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

4

2 回答 2

1

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

于 2016-03-30T13:02:35.813 回答
-1

我是 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;
});

请让我知道这对你有没有用！

于 2016-06-11T15:17:42.727 回答