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

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 代码。

更好的方法是创建一个指令并将该段代码放入指令 link 函数中。

它将确保 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

adding js for elements added by ng-repeat

html

javascript

angularjs

ng-repeat