CODEWITHSUNDEEP
javascriptangularjshtml
Michael Warner
Michael Warner

Reputation: 4225

HTML placeholder override the ng-model value if it is 0

Is there a way to tell ng-model if your value is 0 then show the placeholder value not the ng-model value.

The reason for this is I have an issue where the UX requires the ng-model to be one value while the business logic requires it to be another.

Something like this.

Controller

$scope.qty = 0;
//...some calculation that requires $scope.qty to be a number

HTML

<input ng-model="qty" placeholder="N/A">
<!-- This will show 0 not N/A as qty has a value-->

I do understand you can edit the functionality of ng-model with the following.

ng-model-options={getterSetter: true}

This does solve this issue in a single ng-model like above but what about when the qty is in a ng-repeat?

In the real world we are making a page that auto calculates the amount of items a user should order based on there inventory. If the inventory is 0 the placeholder is used if it is changed by the user then the value they entered in is used.

As there is more then one product they can order we have this in an ng-repeat.

Controller

$scope.products = [{
    //...product data
    inventory : 0
}]

HTML

<tr ng-repeat="product in products track by $index">
    <td>
        <input ng-model="product.inventory" placeholder="N/A">
    </td>
</tr>

You can try the setter getter method but as the only value you get is the value entered into the input box you lose the context of which item the user is referring to unless you create a setter getter function for each product.

Upvotes: 3

Views: 1366

Answers (2)

GANI
GANI

Reputation: 2049

You can ngModelOptions, Object to tell Angular exactly when to update the Model.

<input ng-model="updateModel" placeholder="some text" ng-model-options={updateModel: true}>

// Controller method
$scope.updateModel= function(value) {
if(value <= 0) {
   return "some text";
}
else {
   return value;
}
}

Upvotes: -1

Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

Try this. You can define a getter function for ng-model directive if you use ng-model-options by setting getterSetter as true. ng-model-options is used to modify the behaviour of ng-model.

<input ng-model="getterSetter" placeholder="N/A" ng-model-options={getterSetter: true}>

// Controller function
$scope.getterSetter = function(value) {
    if(value == 0) {
       return "N/A";
    }
    else {
       return value;
    }
}

Upvotes: 2

Related Questions