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

【问题标题】：Display division calculation result in an HTML5 / AngularJS input在 HTML5 / AngularJS 输入中显示除法计算结果
【发布时间】：2017-04-26 23:09:55
【问题描述】：

我在 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);
    }
};
}

索引.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>

【问题讨论】：

• 你想做什么？这个不清楚？显示 div 时是否要调用该函数？
• 当我从 ng-options 中提到的选项中选择一个选项时，我试图让 2 个标签输入形成的组形式

  出现。
• 你能在 ng-change 上记录 selectedTypeContrat.type 吗？
• 我相信错误出现在 montantAnnuel() 的 $scope 中，因为当我应用 ng-if 并选择显示 2 个标签输入的选项时，$scope 不会更新它的价值......或类似的东西。
• 如何登录 ng-change ？我可以在哪里放置 console.log(); ?