Display division calculation result in an HTML5 / angularjs input

Question

0.00/5 (No votes)

See more:

Hello,

I have a problem in the display in a "disabled" input of the result of calculating division of two numbers that I enter in 2 different inputs.

I want to show the result of the division of inputMontantGlobalAffaire on inputDureeAnnee, and put it in inputMontantAnnual, but I can not do it from the file App.js

Index.cshtml :

HTML

<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

JavaScript

///<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;
        }
    };
}

What I have tried:

I tried many things, but it does not work

Posted 24-Apr-17 5:15am

Saad Hamani

Updated 26-Apr-17 8:34am

v3

Add a Solution

3 solutions

Solution 1

use the $scope object to read/write the values inside controller

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        var App = angular.module('App',[]);
        App.controller('Ctrl', ['$scope', Ctrl]);

        function Ctrl($scope) {
            $scope.inputMontantGlobalAffaire = '';
            $scope.inputMontantAnnuel = '';
            $scope.inputDureeAnnee = '';

            $scope.montantAnnuel = function () {
                debugger;
                if (isNaN($scope.inputMontantAnnuel)) {
                    $scope.inputMontantAnnuel = "";
                }
                else {
                    $scope.inputMontantAnnuel = $scope.inputMontantGlobalAffaire / $scope.inputDureeAnnee;
                }
            };
        }
    </script>
</head>
<body>
    <div ng-app="App" ng-controller="Ctrl">
        <input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" pattern="[0-9]+(\\.[0-9][0-9]?)?" required>
        <input type="number" class="form-control" id="inputDureeAnnee" name="inputDureeAnnee" placeholder="" ng-model="inputDureeAnnee" ng-keyup="montantAnnuel()" required>
        <input disabled type="number" class="form-control" id="inputMontantAnnuel" name="inputMontantAnnuel" ng-model="inputMontantAnnuel">

    </div>
</body>
</html>

Posted 24-Apr-17 13:59pm

Karthik_Mahalingam

v2

Comments

Saad Hamani 25-Apr-17 4:32am

It didn't work.

Karthik_Mahalingam 25-Apr-17 11:38am

which portion

Solution 3

Finally, the problem turns out not to be that, but another conflict between ng-if and ng-options that I can not seem to overcome.
The function montantAnnuel() works well, but when I use ng-if to show a group of 2 inputs, then it does not work anymore.

App.js

JavaScript

///<reference path="../Scripts/angular.js" />
///<reference path="../Scripts/angular.min.js" />
///<reference path="../Scripts/angular-route.min.js" />

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 :

HTML

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

Posted 25-Apr-17 22:16pm

Saad Hamani

Updated 25-Apr-17 22:17pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Saad Hamani · Accepted Answer · 2017-04-26T08:34:00

Solution 4

Finally got this working, see this JSfiddle. Had to use ng-show instead of ng-if

Posted 26-Apr-17 8:34am

Saad Hamani