2

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!

1
  • 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
    Commented Mar 30, 2018 at 23:05

1 Answer 1

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,

Not the answer you're looking for? Browse other questions tagged or ask your own question.