AngularJS HTML 5 输入范围输出

AngularJS HTML 5 Input Range Output

本文关键字：范围 输出 输入 HTML AngularJS      更新时间：2023-09-26

我的input type="range"输出 1、2、3、4 或 5。

我的问题是，如何使用 AngularJS 将输出更改为以下内容？

  • 1：可怕
  • 2：低于平均水平
  • 3：平均
  • 4：高于平均水平
  • 5：优秀

这是我的代码：

<label for=fader>How would you rate this site?</label>
<input type=range min=1 max=5 value=1 id=fader list=ratingsettings ng-model="rating">
<datalist id=ratingsettings>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</datalist>
<p>{{rating}}</p>

这是我的Plunkr。

最直接的方法是在控制器中使用 map 对象：

$scope.mapRating = {
    1: "Terrible",
    2: "Below average",
    3: "Average",
    4: "Above average",
    5: "Excellent"
};

然后在 HTML 中像这样使用它：

<p>{{mapRating[rating]}}</p

演示：http://plnkr.co/edit/MtsjS0fuOSUiWFuA3GeF?p=preview

相关文章：