Changing AngularJS number input range

Question

I have a very simple question for you. I am currently trying to change the allowed input in my label depending on which ID of the tab I am currently at.

It is a hotel booking app using ionic 1 and angular. Say I am at the hotelroom with an ID of '1', then I want to set the maximum input to 2. But if Im at hotelroom with an ID of '2' I want to set the maximum to 5. Can it be done solely within the label tags?

<label class="item item-input">
  <input type="number" name="adults" required 
placeholder="Antal vuxna" ng-model="data.people">
</label>

Answers shown as examples are highly appreciated :) Thanks in advance!

There are two options I can think of. Option A, use ng-if based on the hotelroom ID and change the max value attribute on the inputs. Option B, use ng-change and validate the value when the user changes it. — BShaps
– BShaps, Commented Mar 30, 2018 at 23:05

georgeawg · Accepted Answer · 2018-03-31 10:30:59Z

3

Use either, the max attribute with interpolation:

<input type="number" name="adults" max="{{maxPeople}}" required 
       placeholder="Antal vuxna" ng-model="data.people" />

OR the ng-max attribute with an expression:

<input type="number" name="adults" ng-max="maxPeople" required 
       placeholder="Antal vuxna" ng-model="data.people" />

JS

$scope.maxPeople = 2;
if ( hotelroom.ID == 2 ) {
    $scope.maxPeople = 5;
};

For more information, see AngularJS <input type=number Directive API Reference,

edited Mar 31, 2018 at 10:30

answered Mar 31, 2018 at 0:46

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

Changing AngularJS number input range

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related