javascript - AngularJS HTML 5 输入范围输出

Question

我的 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>

Here's my Plunkr .

Answer 1

最直接的方法是在 Controller 中使用 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