Hidden Input and AngularJS ng-model binding

Question

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.

Arun P Johny · Accepted Answer · 2015-05-04 05:43:44Z

30

In your case since you just want to use

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

Demo: Fiddle

answered May 4, 2015 at 5:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Camilo Sanchez Over a year ago

There's no need for a hidden field. The init logic can be placed in the controller <div ng-controller="TheController" ng-init="Price=100;">

Pankaj Parkar · Accepted Answer · 2015-05-04 05:47:04Z

11

Angular just ignores hidden input elements.(ng-model doesn't support input field)

If you want that value in ng-model it self, then it shouldn't be of type hidden. You could solve this problem by hiding that div by doing display:none instead of giving type hidden or using ng-show directive make it hidden.

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

edited May 4, 2015 at 5:47

answered May 4, 2015 at 5:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

twk Over a year ago

That's a good idea too, rendering a normal input field with ng-model but using a display:none. Clever work around suggestion.

Avinash Solanki · Accepted Answer · 2015-05-04 06:25:13Z

2

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.

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

answered May 4, 2015 at 6:25

Avinash Solanki

1,1011 gold badge10 silver badges19 bronze badges

1 Comment

twk Over a year ago

I was attempting to use a hidden input as well until I realized, you are correct, the data I needed was available by passing an entire object to the controller, like, Front End: ng-submit="newComment(post)" and Back-End: $scope.newComment = function(post) { console.log(post._id) }. This will pass the entire post object into the controller, and from there properties (like _id) can be accessed. Thanks for your answer!

harishr · Accepted Answer · 2015-05-04 05:38:42Z

0

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

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

answered May 4, 2015 at 5:38

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Comments

Jan Ranostaj · Accepted Answer · 2015-05-04 05:43:07Z

0

You can pass Price value inside the click function as an argument like:

<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 Product info loaded into $scope variable you just call it directly from controller and do not nedd to pass Price as hidden or in click function

$scope.Product  =  productFactory.get();

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

answered May 4, 2015 at 5:43

Jan Ranostaj

1467 bronze badges

Comments

Dale K · Accepted Answer · 2020-01-15 04:19:11Z

0

$scope.price = 10;

Use double brackets to capture the scope value.

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

edited Jan 15, 2020 at 4:19

Dale K

28.1k15 gold badges59 silver badges86 bronze badges

answered Nov 16, 2017 at 18:09

Keerthi

9236 silver badges22 bronze badges

Collectives™ on Stack Overflow

Hidden Input and AngularJS ng-model binding

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related