HTML占位符覆盖ng-model值，如果它是0

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

本文关键字：如果 占位符 覆盖 ng-model HTML      更新时间：2023-09-26

是否有办法告诉ng-model如果你的值为0，然后显示占位符值而不是ng-model值

这样做的原因是我有一个问题，用户体验要求ng模型是一个值，而业务逻辑要求它是另一个值。

就像这样。

控制器

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

我知道你可以用下面的命令编辑ng-model的功能。

ng-model-options={getterSetter: true}

这确实在上面的单个ng模型中解决了这个问题，但是当数量处于ng-repeat中时呢?

在现实世界中，我们正在制作一个页面，该页面根据库存自动计算用户应该订购的物品数量。如果库存为0，则使用占位符，如果它被用户更改，则使用他们输入的值。

由于他们可以订购的产品不止一种，所以我们在ng中重复了这一点。

控制器

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

你可以尝试setter getter方法，但因为你得到的唯一值是输入框中的值，所以你失去了用户引用的产品的上下文，除非你为每个产品创建一个setter getter函数。

试试这个。如果你使用ng-model-options，你可以通过设置getterSetter为true来为ng-model指令定义getter函数。ng-model-options用于修改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;
    }
}

你可以使用ngModelOptions, Object来告诉Angular何时更新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;
}
}
相关文章：