Question

我是Angular的新手。

一周以来一直在努力。

有人能告诉我怎么能这样做？

<div class="well" ng-repeat="para in parameter">
            <label>{{para}}:</label>
            **<input id="ex{{$index}}"** data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step=1 data-slider-value="0" style="display:inline" />
            <script>
                    **$('#ex{{index}}').slider({
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });**
                }
            </script>
        </div>

Answer 1

我建议不要在HTML中直接使用Slider JS代码。

更好的方法是创建一个指令并将这段代码放在指令链接函数中。

它将确保您可以使用DOM元素。

module.directive("addSlider", function() {
  return {
    restrict:"AE",
    link: function() {
      $("input[id^=ex]").slider({
                    formatter: function (value) {
                        return 'Current value: ' + value;
                    }
                });
    }
  }
});

HTML中的

将其添加为属性

<input id="ex{{$index}}" add-slider data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step=1 data-slider-value="0" style="display:inline" />

另一个建议，我想给出的是：

而不是将JS代码放在迭代器中，使用像

这样的通用CSS选择器

$("input[id^=ex]").slider({
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });

为ng-repeat添加的元素添加js

1 个答案: