HTML占位符覆盖ng模型值，如果它是0

Question

有没有办法告诉ng-model，如果您的值是0，则显示占位符值而不是ng-模型值。

造成这种情况的原因是我有一个问题，UX需要将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-模型的功能。

ng-model-options={getterSetter: true} 

这确实解决了像上面那样的单个ng模型中的这个问题，但是当qty在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函数。

Answer 1

你可以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; 
} 
} 

Answer 2

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