隐藏输入和AngularJS ng模型绑定

Question

我想在添加数量时使用AngularJS来计算产品的总价格.我有一个代码如下:

<div ng-app="TheApp">
<div ng-controller="TheController">
    <input type="hidden" name="Price" value="100" ng-model="Price" />
    <input type="text" name="Quantity" ng-model="Quantity" />
    Total Price:{{TotalPrice}}
    <button class="btn btn-primary btn-block" ng-click="click()">Add Items</button>
</div>

我的控制器里面有:

    $scope.TotalPrice = $scope.Price * $scope.Quantity;

我知道Angular不支持隐藏,但我正在寻找解决问题的最佳实践.请注意按钮不是用于计算TotalPrice而是发送最终结果.我希望它能够实时更新.

Answer 1

在你的情况下,因为你只是想使用

<input type="hidden" name="Price" ng-init="Price=100;" ng-value="Price"/>

演示:小提琴

Answer 2

Angular只是忽略隐藏的输入元素.(ng-model不支持输入字段)

如果你想要自己的那个值ng-model,那么它不应该是隐藏的类型.你可以通过隐藏div来display:none代替隐藏类型或使用ng-show指令隐藏它来解决这个问题.

<div ng-controller="TheController">
    <input type="text" ng-show="false" name="Price" value="100" ng-model="Price" />
    <input type="text" name="Quantity" ng-model="Quantity" />
    Total Price:{{TotalPrice}}
    <button class="btn btn-primary btn-block" ng-click="click()">Add Items</button>
</div>