Question

我试图在我的项目中使用这个插件在ng-repeat中有多个范围滑块。 http://prajwalkman.github.io/angular-slider/

当有单个滑块时插件工作正常，但是当我尝试将多个滑块放入ng-repeat时它不起作用。

不确定我的代码是否有任何问题或插件不支持。

无论如何我能使它发挥作用吗？

这是demo plnkr。 http://plnkr.co/edit/9H7WF44X7zCWaw91jDyr?p=preview

<body ng-controller='PriceCtrl'>

  {{position}}
  <div>
      <slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>
  </div>

  <div ng-repeat="item in items">
    {{item}}
    <slider floor="10" ceiling="60" ng-model-low="item.minPrice" ng-model-high="item.maxPrice"></slider>
  </div>
</body>

app.controller('PriceCtrl', function ($scope){
  $scope.items = [{name: "item 1", minPrice: 10,
                  maxPrice: 50},
                  {name: "item 2", minPrice: 5,
                  maxPrice: 40},
                  {name: "item 3", minPrice: 15,
                  maxPrice: 30}];

  $scope.lower_price_bound = 0;
  $scope.upper_price_bound = 50;

  $scope.position = {
    name: 'Potato Master',
    minAge: 25,
    maxAge: 40
  };

});

Answer 1

您可以使用rg-slider 它允许您在一个页面中使用多个滑块。

AngularJS - 范围滑块在ng-repeat（插件）中不起作用

1 个答案: