Saad Hamani Ответов: 3

Отображение результата вычисления деления на вход HTML5 / angularjs

Привет,

У меня есть проблема в отображении на "отключенном" входе результата вычисления деления двух чисел, которые я ввожу в 2 разных входа.

Я хочу показать результат деления inputMontantGlobalAffaire на inputDureeAnnee и поместить его в inputMontantAnnual, но я не могу сделать это из файла App.js

Индекс.cshtml по :
<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
///<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;
        }
    };
}


Что я уже пробовал:

Я много чего перепробовал, но ничего не вышло

3 Ответов

Рейтинг:
8

Saad Hamani

Наконец-то это сработало, видите это JSfiddle Пришлось использовать ng-show вместо ng-if

Рейтинг:
1

Karthik_Mahalingam

используйте $scope объект для чтения / записи значений внутри контроллера

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

Saad Hamani

Это не сработало.

Karthik_Mahalingam

какая часть

Рейтинг:
1

Saad Hamani

Наконец, проблема оказывается не в этом, а в другом конфликте между НГ-если и НГ-варианты этого я, кажется, не могу преодолеть.
Функция montantAnnuel () работает хорошо, но когда я использую НГ-если чтобы показать группу из 2 входов, то она больше не работает.

App.js

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

Индекс.cshtml по :
<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>