Menu
I want to use AngularJS to calculate total price for product when I add Quantity. I have a code as below:
<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.
228
The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding.
<input type="hidden"> <input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token.
The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable. Save this answer.
In your case since you just want to use
<input type="hidden" name="Price" ng-init="Price=100;" ng-value="Price"/> Demo: Fiddle
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
