Question

我正在开展一个角度项目，我在页面上执行计算。在我放置最终结果的文本字段中，当我得到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告诉总 ngModel，它将该值视为getter / setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions

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

修改

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

angular_s输出中的计算因ng-model

1 个答案:

修改