Caché Entrée et AngularJS ng-modèle de liaison

Je veux utiliser AngularJS pour calculer le total des prix pour le produit quand j'ai ajouter la Quantité. J'ai un code comme ci-dessous:

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

À l'intérieur de mon contrôleur, j'ai:

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

Je sais Angulaire ne prend pas en charge caché, mais je suis à la recherche de la meilleure solution pour résoudre le problème.
Veuillez considérer le bouton n'est pas pour le calcul de TotalPrice mais l'envoi du résultat final. Je veux qu'il soit mis à jour en temps réel.

OriginalL'auteur Mehrdad Babaki | 2015-05-04

angularjs javascript

17

Dans votre cas puisque vous voulez juste utiliser
```
<input type="hidden" name="Price" ng-init="Price=100;" ng-value="Price"/>
```
Démo: Violon

Voila ! Merci beaucoup :)))
Il n'y a pas besoin d'un champ caché. L'init de la logique peut être placé dans le contrôleur <div ng-controller="TheController" ng-init="Price=100;">

OriginalL'auteur Arun P Johny
6

Angulaire ignore juste caché des éléments d'entrée.(ng-modèle ne prend pas en charge
champ de saisie)

Si vous voulez que la valeur en ng-model lui-même, alors il ne devrait pas être de type hidden. Vous pouvez résoudre ce problème en masquant les div en faisant display:none au lieu de donner le type cachés ou à l'aide de ng-show directive caché.
```
<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>
```
C'est une bonne idée, le rendu normal d'un champ de saisie avec ng-model mais à l'aide d'un display:none. Travail intelligent autour de la suggestion.

OriginalL'auteur Pankaj Parkar
2

Je pense qu'il n'est pas nécessaire d'utiliser une valeur cachée dans le code HTML, car il n'est pas modifiée par l'utilisateur, vous pouvez simplement initialiser cette valeur dans le contrôleur de domaine d'application et de mise à jour de votre "TotalPrice" valeur lorsque l'utilisateur ajoute une quantité ou vous pouvez également utiliser ng-init dans le html pour l'initialiser, mais il n'est pas une bonne pratique d'utiliser ng-init comme indiqué par les docs.

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

J'ai été de tenter d'utiliser un caché d'entrée ainsi jusqu'à ce que j'ai compris, vous avez raison, les données dont j'avais besoin était disponible par le passage d'un objet entier pour le contrôleur, comme, Avant Fin: ng-submit="newComment(post)" et Back-End: $scope.newComment = function(post) { console.log(post._id) }. Cela va passer l'intégralité du post de l'objet dans le contrôleur, et à partir de là, les propriétés (comme _id) peut être consulté. Merci pour votre réponse!

OriginalL'auteur Avinash Solanki

si vous voulez le faire sans clics

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

ou si vous voulez le faire sur cliquez sur

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

puis dans addItem

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

OriginalL'auteur harishr

Vous pouvez passer Price valeur à l'intérieur de la fonction de clic comme un argument comme:

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

Ou si vous avez votre Product info chargé en $de la portée de la variable que vous venez de l'appeler directement à partir du contrôleur et de ne pas nedd passer Price cachés ou cliquez sur la fonction

$scope.Product  =  productFactory.get();

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

OriginalL'auteur Jan Ranostaj

0

$champ d'application.prix = 10;

Utiliser des doubles crochets pour tenir compte de la portée de la valeur.
```
<input type="hidden" name="Price" value="{{price}}"/>
```
OriginalL'auteur Keerthi

Vous devez vous connecter pour publier un commentaire.