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"/>

演示：Fiddle

Answer 2

Angular只是忽略隐藏的输入元素。（ng-model不支持输入字段）

如果你希望ng-model中的那个值是自己的，那么它不应该是隐藏的类型。您可以通过执行display:none隐藏该div而不是隐藏类型或使用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>

Answer 3

我认为不需要在HTML中使用隐藏值，因为它不会被用户更改，您只需在控制器范围内初始化此值并在用户添加任何数量时更新“TotalPrice”值，或者您可以也可以在html中使用ng-init来初始化它，但是按照文档的说明使用ng-init并不是一个好习惯。

https://docs.angularjs.org/api/ng/directive/ngInit

Answer 4

如果你想在没有点击的情况下这样做

<input type="hidden" name="Price" value="100" ng-model="Price" ng-change="updateTotalPrice()" />
<input type="text" name="Quantity" ng-model="Quantity" ng-change="updateTotalPrice()" />

或者如果您想点击

<button class="btn btn-primary btn-block" ng-click="addItem()">Add Items</button>

然后在addItem

中

function addItem(){
   //increment quantity 
   //call to updateTotalPrice()
}

Answer 5

您可以在click函数中传递Price值作为参数，如：

<div ng-app="TheApp">
<div ng-controller="TheController">

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

或者，如果您将Product信息加载到$ scope变量中，则只需直接从控制器调用它，并且不要将Price作为隐藏或单击函数传递

$scope.Product  =  productFactory.get();

$scope.click = function() {
 $scope.TotalPrice = $scope.Product.Price * $scope.Quantity;
}

Answer 6

$ scope.price = 10;

使用双括号捕获范围值。

<input type="hidden" name="Price" value="{{price}}"/>

隐藏输入和AngularJS ng模型绑定

6 个答案: