Javascript 隐藏输入和 AngularJS ng-model 绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30023195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hidden Input and AngularJS ng-model binding
提问by Mehrdad Babaki
I want to use AngularJS to calculate total price for product when I add Quantity. I have a code as below:
我想在添加数量时使用 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>
Inside my controller I have:
在我的控制器中，我有：
$scope.TotalPrice = $scope.Price * $scope.Quantity;
I know Angular does not support hidden but I am looking for the best practice to solve the issue. Please consider button is not for calculating TotalPrice but sending final result. I want it to be updated real time.
我知道 Angular 不支持隐藏，但我正在寻找解决问题的最佳实践。请考虑按钮不是用于计算 TotalPrice 而是发送最终结果。我希望它实时更新。
回答by Arun P Johny
回答by Pankaj Parkar
Angular just ignores hidden input elements.(ng-model doesn't support input field)
Angular 只是忽略隐藏的输入元素。（ng-model 不支持输入字段）
If you want that value in ng-modelit self, then it shouldn't be of type hidden. You could solve this problem by hiding that div by doing display:noneinstead of giving type hidden or using ng-showdirective make it hidden.
如果你想要ng-model它自己的价值，那么它不应该是隐藏的。您可以通过隐藏该 div 来解决这个问题，display:none而不是提供 type hidden 或 usingng-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>
回答by Avinash Solanki
I think there is no need to use a hidden value in the HTML, since it's not altered by user, you can simply initialize this value in controller's scope and update your "TotalPrice" value when the user adds any quantity or you can also use ng-init in html to initialize it, but it is not a good practice to use ng-init as stated by the docs.
我认为没有必要在 HTML 中使用隐藏值，因为它不会被用户改变，你可以简单地在控制器范围内初始化这个值，并在用户添加任何数量时更新你的“总价格”值，或者你也可以使用 ng -init 在 html 中进行初始化，但按照文档所述使用 ng-init 并不是一个好习惯。
回答by Keerthi
$scope.price = 10;
Use double brackets to capture the scope value.
使用双括号来捕获范围值。
<input type="hidden" name="Price" value="{{price}}"/>
回答by Jan Ranostaj
You can pass Pricevalue inside the click function as an argument like:
您可以将Priceclick 函数内的值作为参数传递，例如：
<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>
Or if you have your Productinfo loaded into $scope variable you just call it directly from controller and do not nedd to pass Priceas hidden or in click function
或者，如果您将您的Product信息加载到 $scope 变量中，您只需直接从控制器调用它，而不需要将其Price作为隐藏或单击函数传递
$scope.Product = productFactory.get();
$scope.click = function() {
$scope.TotalPrice = $scope.Product.Price * $scope.Quantity;
}
回答by harishr
if you want to do it without clicks
如果你想在没有点击的情况下做到这一点
<input type="hidden" name="Price" value="100" ng-model="Price" ng-change="updateTotalPrice()" />
<input type="text" name="Quantity" ng-model="Quantity" ng-change="updateTotalPrice()" />
or if you want to do it on click
或者如果你想点击它
<button class="btn btn-primary btn-block" ng-click="addItem()">Add Items</button>
and then in addItem
然后在 addItem
function addItem(){
//increment quantity
//call to updateTotalPrice()
}
