Affichage du résultat de calcul de division dans un input HTML5 / AngularJS

Version imprimable

Bonjour,

J'ai un problème dans l'affichage dans un input "disabled" du résultat de calcul de division de deux nombres que je saisis dans 2 inputs différents.

Je veux afficher le résultat de la division de inputMontantGlobalAffaire sur inputDureeAnnee, et le mettre dans inputMontantAnnuel, mais je n'arrive pas à le faire depuis le fichier App.js.

Index.cshtml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script src="~/ScriptsJS/App.js"></script>
 
<div ng-app="App" ng-controller="Ctrl">
    <form class="form-horizontal" id="supportDemandeForm" name="supportDemandeForm" method="post" ng-submit="validationSupportDemande(supportDemandeForm.$valid)" novalidate>
	<fieldset>
 
		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputMontantGlobalAffaire.$touched && supportDemandeForm.inputMontantGlobalAffaire.$invalid }">
			<div class="col-lg-10">
				<input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" pattern="[0-9]+(\\.[0-9][0-9]?)?" required>
			</div>
		</div>
 
		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputDureeAnnee.$touched && supportDemandeForm.inputDureeAnnee.$invalid }">
			<div class="col-lg-10">
				<input type="number" class="form-control" id="inputDureeAnnee" name="inputDureeAnnee" placeholder="" ng-model="inputDureeAnnee" ng-keypress="montantAnnuel()" required>
			</div>
 
			<div class="col-lg-10">
				<input disabled type="number" class="form-control" id="inputMontantAnnuel" name="inputMontantAnnuel" ng-model="inputMontantAnnuel" >
			</div>
		</div>
</fieldset>

App.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
///<reference path="../Scripts/angular.min.js" />
///<reference path="../Scripts/angular-route.min.js" />
 
var App = angular.module('App', ['ngMessages']);
 
App.controller('Ctrl', ['$scope', Ctrl]);
 
function Ctrl($scope) {
 
    $scope.montantAnnuel = function () {
        if (isNaN(inputMontantAnnuel)) {
           inputMontantAnnuel = "";
        }
        else {
           inputMontantAnnuel = inputMontantGlobalAffaire / inputDureeAnnee;
        }
    };
}

24/04/2017, 22h51
bouhirmani

http://plnkr.co/edit/NA3b91gl45f9HAInrtju?p=preview

Finalement, le problème s'avère ne pas être ça, mais un autre conflit entre ng-if et ng-options.
La fonction montantAnnuel() fonctionne bien, mais quand j'utilise ng-if pour faire apparaitre un groupe de 2 inputs, alors là ça ne marche plus.

App.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
var SupportDemandeApp = angular.module('SupportDemandeApp', ['ngMessages']);
 
SupportDemandeApp.controller('SupportDemandeCtrl', ['$scope', SupportDemandeCtrl]);
 
function SupportDemandeCtrl($scope) {
 
    $scope.typeContrat = function () {
        $scope.types = ['Niv.I - Impartition IMS',
                        'Niv.II - Impartition TMA / AMS',
                        'Niv.III - Projet',
                        'Niv.IV - Impartition BPO',
                        'Multi - Tiers avec Impartition',
                        'Multi-Tiers CS & Projet',
                        'Vente de licence ou produit sans services ni modification'];
        $scope.selectedTypeContrat = {};
    };
    $scope.montantAnnuel = function () {
        $scope.inputMontantAnnuel = 0;
        if (isNaN($scope.inputMontantAnnuel)) {
            $scope.inputMontantAnnuel = 0;
        }
        else {
            $scope.inputMontantAnnuel = ($scope.inputMontantGlobalAffaire / $scope.inputDureeAnnee);
        }
    };
}

Index.cshtml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<div ng-app="App" ng-controller="Ctrl">
    <form class="form-horizontal" id="supportDemandeForm" name="supportDemandeForm" method="post" ng-submit="validationSupportDemande(supportDemandeForm.$valid)" novalidate>
		<fieldset>
			<div class="form-group">
				<label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)</label>
				<div class="col-lg-10">
					<input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" ng-change="montantAnnuel()" pattern="[0-9]+(\\.[0-9][0-9]?)?" required>            
				</div>
			</div>
 
			<div class="form-group">
				<label for="selectTypeContrat" class="col-lg-2 control-label">Type de contrat (IS/OS)<span style="color:red"> *</span></label>
				<div class="col-lg-10">
					<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-options="type for type in types" required></select>
 
				</div>
			</div>
 
			<div class="form-group check-element" ng-if="selectedTypeContrat.type == 'Niv.I - Impartition IMS' || selectedTypeContrat.type == 'Niv.II - Impartition TMA / AMS' || selectedTypeContrat.type == 'Niv.IV - Impartition BPO' || selectedTypeContrat.type == 'Multi-Tiers avec Impartition'">
				<div>
					<label for="inputDureeAnnee" class="col-lg-2 control-label">Durée (en années)</label>
					<div class="col-lg-10">
						<input type="number" class="form-control" id="inputDureeAnnee" name="inputDureeAnnee" ng-model="inputDureeAnnee" ng-change="montantAnnuel()" required>
					</div>
				</div>
 
				<div>
					<label for="inputMontantAnnuel" class="col-lg-2 control-label">Montant annuel (en K€)</label>
					<div class="col-lg-10">
						<input readonly type="number" class="form-control" id="inputMontantAnnuel" name="inputMontantAnnuel" ng-model="inputMontantAnnuel" />
					</div>
				</div>
 
			</div>
		</fieldset>
	</form>
</div>