角度中的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;
});

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