javascript - ng-model 导致 AngularJS 输出中的计算失败

Question

我正在开发一个 Angular 项目，在页面上执行计算。在我放置最终结果的文本字段中，当我得到一个 ng-model 时，答案无法加载。当我拿出ng-model时，答案就出现了。但我希望它在具有 ng-model="total"时工作，因为我会将总值发送到数据库。使用下面的脚本，它可以工作

<input name="price" type="text"  id="price" ng-model="price">
<input name="quantity" type="text"  id="quantity"ng-model="price">
<input name="total" type="text"  id="total" value="{{.price*quantity}}">

但是有了这个

 <input name="price" type="text"  id="price" ng-model="price">
    <input name="quantity" type="text"  id="quantity"ng-model="price">
    <input name="total" type="text"  id="total" value="{{.price*quantity}}" ng-model="total">

它无法工作。答案没有出现在文本框中

Answer 1

试试这个:

<input name="price" 
       type="text"
       ng-model="price" string-to-number>

<input name="quantity" 
       type="text"
       ng-model="quantity" string-to-number>

<span>{{ price * quantity }}</span>

我不确定您为什么要尝试将计算值放入第三个输入中，但如果您这样做，您将需要使用ng-model-options来告诉< em>total ngModel 将该值视为 getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions

另请注意string-to-number指令。您正在处理输入中的字符串。因此，为了使插值起作用，您可能需要添加这些内容。

编辑

这是一个工作示例，说明我认为您如何尝试允许覆盖计算值。您可以在总输入中输入另一个值，然后按 Enter 键查看其工作情况。这使用 ng-model-options - http://codepen.io/jusopi/pen/XKQzzv