在 HTML5 / AngularJS 输入中显示除法计算结果

Question

我在 ng-if 和 ng-options 之间有冲突。

函数 montantAnnuel() 在没有 ng-if 的情况下运行良好，但是当我使用 ng-if 显示一组 2 个输入时，它就不再工作了。

App.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.matchSelectedTypeContrat = function () {
    if (($scope.selectedTypeContrat.type == 'Niv.I - Impartition IMS') ||
        ($scope.selectedTypeContrat.type == 'Niv.II - Impartition TMA / AMS') ||
        ($scope.selectedTypeContrat.type == 'Niv.IV - Impartition BPO') ||
        ($scope.selectedTypeContrat.type == 'Multi-Tiers avec Impartition'))
        return true;
    else
        return false;
};

$scope.inputMontantAnnuel = 0;

$scope.montantAnnuel = function () {
    if (angular.isUndefined($scope.inputMontantGlobalAffaire) && angular.isUndefined($scope.inputDureeAnnee)) {
        $scope.inputMontantAnnuel = 0;
    }
    else if (angular.isUndefined($scope.inputDureeAnnee)) {
        $scope.inputMontantAnnuel = $scope.inputMontantGlobalAffaire;
    }
    else if ($scope.inputMontantGlobalAffaire && $scope.inputDureeAnnee) {
        $scope.inputMontantAnnuel = ($scope.inputMontantGlobalAffaire / $scope.inputDureeAnnee);
    }
};
}

Index.cshtml :

<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 }">
                <label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)<span style="color:red"> *</span></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]?)?" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Build + RUN + Infrastructure" required>
                    <div class="help-block" ng-messages="supportDemandeForm.inputMontantGlobalAffaire.$error" ng-if="supportDemandeForm.inputMontantGlobalAffaire.$touched"><div ng-message="required">Champ requis</div></div>
                </div>
            </div>

            <div class="form-group" ng-class="{ 'has-error': supportDemandeForm.selectTypeContrat.$touched && supportDemandeForm.selectTypeContrat.$invalid }">
                <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-change="montantAnnuel()" ng-options="type for type in types" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Voir définitions dans l'onglet Type de contrat" required></select>
                    <div class="help-block" ng-messages="supportDemandeForm.selectTypeContrat.$error" ng-if="supportDemandeForm.selectTypeContrat.$touched"><div ng-message="required">Champ requis</div></div>
                </div>
            </div>

            <div class="form-group check-element" ng-if="matchSelectedTypeContrat()==true" ng-class="{ 'has-error': supportDemandeForm.inputDureeAnnee.$touched && supportDemandeForm.inputDureeAnnee.$invalid }">
                <div>
                    <label for="inputDureeAnnee" class="col-lg-2 control-label">Durée (en années)<span style="color:red"> *</span></label>
                    <div class="col-lg-10">
                        <input type="number" class="form-control" id="inputDureeAnnee" name="inputDureeAnnee" placeholder="" ng-model="inputDureeAnnee" ng-change="montantAnnuel()" required>
                        <div class="help-block" ng-messages="supportDemandeForm.inputDureeAnnee.$error" ng-if="supportDemandeForm.inputDureeAnnee.$touched"><div ng-message="required">Champ requis</div></div>
                    </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>

Answer 1

您可能需要初始化变量并在 select 上调用 ng-change:

$scope.inputDureeAnnee = 0;
$scope.inputMontantGlobalAffaire = 0;

<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-options="type for type in types" required ng-change="montantAnnuel()"> </select>

因为当您显示 div 或更新您的字段时，您可能会尝试对 undefined 值执行操作。

其他：

代替isNaN，使用angular.isUndefined，
而不是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'"，使用一个函数：ng-if="matchSelectedType()"，这个函数进行测试并且returns true 或false

或者您也可以这样做，但您的模型不会反映初始值（您必须像这样访问它：selectedTypeContrat.type.name）：

$scope.types = [
        {name: 'Niv.I - Impartition IMS', displayDiv: true},
        {name: 'Niv.II - Impartition TMA / AMS', displayDiv: true},
        {name: 'Niv.III - Projet', displayDiv: false},
        {name: 'Niv.IV - Impartition BPO', displayDiv: true},
        {name: 'Multi - Tiers avec Impartition', displayDiv: true},
        {name: 'Multi-Tiers CS & Projet', displayDiv: false},
        {name: 'Vente de licence ou produit sans services ni modification', displayDiv: false}
    ];


<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-options="type as type.name for type in types" required></select>

ng-if="selectedTypeContrat.type && selectedTypeContrat.type.displayDiv  === true"

终于搞定了，看这个fiddle 必须使用 ng-show 而不是 ng-if

Answer 2

montantAnnuel() 的小改进：

$scope.montantAnnuel = function () {
    if (angular.isUndefined($scope.inputMontantGlobalAffaire))
        $scope.inputMontantAnnuel = 0;
    else if (angular.isUndefined($scope.inputDureeAnnee)) {
        $scope.inputMontantAnnuel = $scope.inputMontantGlobalAffaire;
    } else {
        $scope.inputMontantAnnuel = ($scope.inputMontantGlobalAffaire / $scope.inputDureeAnnee);
    }
};

在 HTML5 / AngularJS 输入中显示除法计算结果

Display division calculation result in an HTML5 / AngularJS input

angularjs

html

twitter-bootstrap-3

angularjs-1.6