Question

有没有办法告诉ng-model你的值是0然后显示占位符值而不是ng-model值。

原因是我有一个问题，即UX要求ng-model是一个值，而业务逻辑要求它是另一个值。

像这样。

控制器

$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模型中解决了这个问题，但是当qty在ng-repeat中时呢？

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

由于他们可以订购多种产品，我们可以在ng-repeat中使用。

控制器

$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函数。

Answer 1

试试这个。如果通过将ng-model-options设置为true来使用getterSetter，则可以为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;
    }
}

Answer 2

您可以使用ngModelOptions，Object告诉Angular何时更新模型。

<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;
}
}

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

2 个答案: