AngularJS HTML 5 Input Range Output

Question

My input type="range" outputs 1, 2, 3, 4 or 5.

My question is, how can I change the output to the following using AngularJS?

1: Terrible
2: Below average
3: Average
4: Above average
5: Excellent

Here's my code:

<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.

dfsq · Accepted Answer · 2014-12-09 21:34:21Z

2

The most direct approach is to use a map object in controller:

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

and then in HTML use it like this:

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

Demo: http://plnkr.co/edit/MtsjS0fuOSUiWFuA3GeF?p=preview

edited Dec 9, 2014 at 21:34

answered Dec 9, 2014 at 21:26

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS HTML 5 Input Range Output

1 Answer 1

Demo: http://plnkr.co/edit/MtsjS0fuOSUiWFuA3GeF?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://plnkr.co/edit/MtsjS0fuOSUiWFuA3GeF?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related