Angular ng-if to determine input number value

Quite simple just not too sure how to code it, I have an input box which sets a value, it then submits the value for processing, Currently I want the value to default to 0 in the input box, if it is currently not assigned a value, i.e 10.

<div class="row">
    <div class="col-sm-8">
    <label for="totalStaff" style="padding-bottom: 10px; width: 150px;">Number of Staff</label>
    <button class="form-button" ng-click="staff.staffTotal = staff.staffTotal - 1" ng-disabled="staff.staffTotal === 0">-</button>
    <input class="form-control max-width" type="number" id="totalStaff" name="totalStaff" min="0"
    ng-model="staff.staffTotal" 
    ng-blur="myform.totalStaff.$touched=true" 
    ng-required="true" 
    ng-class="{'input-error': myform.totalStaff.$touched && myform.totalStaff.$error.required}"
    ng-if="isEmpty"  
    />
    <button class="form-button" ng-click="staff.staffTotal = staff.staffTotal + 1">+</button>
    </div>
</div>

controller isEmpty function

    $scope.isEmpty = function(number) {         
        return (number == undefined || number == null || number == "");
    };

So at this stage it does everything but either assign the value of 0, or the value by the user. I want the values to default to 0, as they are not all mandatory, but the form won't allow submissions with empty input fields.

Answers 1

  • Try this

    in html change ng-if to ng-if="isEmpty(staff.staffTotal)"

    in controller

    $scope.isEmpty = function(number) {
             if(number == 10){// you can change it however you want
                $scope.staff.staffTotal == 0;
                return true;
    
              }else{
                $scope.staff.staffTotal == number;
                return true;
              }
    };
    

Related Articles