Question

我正在使用Angular Material来处理Web应用程序。通常，我在使用滑动条时使用<input>标记。在那里，我可以使用JavaScript函数oninput()来检查是否有任何活动。这会向服务器端脚本发送一个数字。在我的代码中，这会发送亮度值（控制启用Web的灯光系统）。

<input type="range" id="c1" max="255" oninput="hexToRGB(document.getElementById('color').value);">

使用Angular Material时，不使用<input>，而是选择使用<md-button>。如果我使用这种新语法尝试oninput()，我就没有回复。

<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" oninput="hexToRGB(document.getElementById('color').value);" class='md-primary'></md-slider>

解决此问题的最佳方法是什么？我应该坚持使用<input>滑块吗？是否有使用oninput()的替代方法？

Answer 1

使用ng-change代替<md-slider flex min="0" max="255" ng-model="color.red" ng-change="modelChanched()" aria-label="red" id="red-slider" class='md-primary'></md-slider>

<section>
            <h2>Title 1</h2>
            <div class="box">
            </div>
            <div class="box">
            </div>
</section>
<section>
            <h2 class="blue">Title 2</h2>
            <div class="box circle"></div>
            <div class="box circle"></div>
            <div class="box circle"></div>
</section>
<section>
            <h2 class="white">Title 3</h2>
</section>

Codepen example

角度材料 - 滑块和输入（）

1 个答案: