如何使用AngularJS将if语句conditon与json响应一起使用

How to use if statement conditon with json response using AngularJS ?

本文关键字:响应 json 一起 conditon AngularJS 何使用 if 语句      更新时间:2023-09-26

我有Json响应,所以如果我得到三个字段的响应为null,我想在表单上实现条件,如我想隐藏的表单的editCtrl其余部分所述。所以我在if语句上使用ng-show,如果字段为null,ng-show=false,但它不起作用,我仍然可以看到基于以下代码的表单。请纠正我编码错误的地方。感谢

HTML

<form name="processRatingForm" novalidate ng-cloak
    ng-controller="EditProcessRatingCtrl" class="border-box-sizing">
    <div class="row">
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="processInherentRisk">Process
                    Inherent risk rating</label>
            </div>
            <div class="radio-low" id="processInhRisk"
                ng-model-options="{ updateOn: 'blur' }" ng-model="processRating.inherentRiskRatingKey" >{{processRating.inherentRiskRatingKey}}</div>
        </div>
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="finalOutcomeInherentRiskRatingKey">Process
                    Inherent risk Business Final</label>
            </div>
            <div class="radio-medium" id="irrFinalOutcome"
                ng-model-options="{ updateOn: 'blur' }"
                ng-model="processRating.finalOutcomeInherentRiskRatingKey">{{processRating.finalOutcomeInherentRiskRatingKey}}</div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="controlEffect">Overall
                    Control Effectiveness Computed</label>
            </div>
            <div><select kendo-drop-down-list 
                    k-data-value-field="'id'"
                    k-data-text-field="'text'"
                    k-option-label="'Select'"
                    k-data-source="ctrlEffOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.controlEffectivenessRatingComputeKey"></select> </div>
        </div>
        <div class="form-group col-md-6" ng-show="showEditdisForm">
            <div>
                <label class="control-label" for="controlEffBusiness">Overall
                    Control Effectiveness Business</label>
            </div>
            <div>
                <select kendo-drop-down-list 
                    k-data-value-field="'id'"
                    k-data-text-field="'text'"
                    k-option-label="'Select'"
                    k-data-source="ctrlEffOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.controlEffectivenessRatingOverrideKey"></select>
            </div>
        </div>
    </div>
    <div ng-show="showEditdisForm">
    <div class="row">
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="residualRatingText">Residual
                    Risk Computed</label>
            </div>
            <div>
                <select kendo-drop-down-list 
                    k-data-value-field="'id'"
                    k-data-text-field="'text'"
                    k-option-label="'Select'"
                    k-data-source="riskBusinessOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.residualRiskRatingComputeKey"></select>
            </div>
            </div>
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="residualRiskBus">Residual
                    Risk Business</label>
            </div>
            <div>
                <select kendo-drop-down-list 
                    k-data-value-field="'id'"
                    k-data-text-field="'text'"
                    k-option-label="'Select'" 
                    k-data-source="riskBusinessOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.residualRiskRatingOverrideKey"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="riskDirection">Risk
                    Direction</label>
            </div>
            <div>
                <select kendo-drop-down-list 
                    k-data-value-field = "'id'"                 
                    k-data-text-field="'text'"
                    k-option-label="'Select'"
                    k-data-source="riskDirOptions"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.residualRiskRatingOverrideKey"></select>
            </div>
        </div>
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="riskAcceptance">Risk
                    Acceptance</label>
            </div>
            <div>
                <input type="radio" name="riskAcceptanceFlag" ng-model="processRating.riskAcceptanceFlag"
                    ng-value="'Yes'">&nbsp;Yes&nbsp;&nbsp;&nbsp; <input
                    type="radio" name="riskAcceptanceFlag" ng-model="processRating.riskAcceptanceFlag"
                    ng-value="'No'">&nbsp;No
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <div>
                <label class="control-label" for="riskAcceptanceComment">Rationale</label>
            </div>
            <div>
                <textarea class="form-control" ng-model="processRating.riskAcceptanceComment"
                    name="riskAcceptanceComment"></textarea>
            </div>
            </div>
            <div class="form-group col-md-6">
                <div>
                    <label class="control-label" for="mssControlFlag">Missing
                        Controls</label>
                </div>
                <div id="mssControlFlag"
                    ng-model-options="{ updateOn: 'blur' }"
                    ng-model="processRating.mssControlFlag">{{processRating.mssControlFlag}}</div>
            </div>
    </div>
</div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="closeModal()">Cancel</button>
        <button type="submit" class="btn btn-primary"
            ng-click="saveProcessRating(); yesCallback()" ng-show="showEditdisForm">Save</button>
    </div>
</form>

MainCtrl.js

$scope.editProcessRtng = function (id) {
            $scope.selectedId = id;
            Rating.findProcessRating(id.processRatingKey).then(function (response){
              $scope.processRating = response.data;
              processRatingGridConfig.PrtmodalWinConfig.title = 'Edit Process Rating';
              $scope.$broadcast('editProcessRating',$scope.processRating);
            })
        };

EditCtrl.js

 $scope.$on('editProcessRating', function() {
          $scope.showEditdisForm = true;
        $scope.ProcessRatingWin.open().center();
        if($scope.processRating.inherentRiskRatingKey === 'null' || $scope.processRating.finalOutcomeInherentRiskRatingKey ==='null' 
          || $scope.processRating.controlEffectivenessRatingComputeKey ==='null') {
            $scope.showEditdisForm = false;
        } else {
          return true;
        }
      });

JSON.JS

{
    "processRatingKey": 154780,
    "processKey": 1000020,
    "beginTransactionTime": 1427203300000,
    "endTransactionTime": 1427203300000,
    "currentFlag": 1,
    "statusLookUpCode": "RS_ACTIVE",
    "createWorkerKey": 1000,
    "createdTimestamp": 1427097885000,
    "modifyWorkerKey": 1000,
    "modifyTimestamp": 1427203300000,
    "modifyUserText": " ",
    "sourceFeedKey": 1,
    "processRatingSessionKey": 1020,
    "inherentRiskRatingKey": 23,
    "controlEffectivenessRatingComputeKey": null,
    "controlEffectivenessRatingOverrideKey": null,
    "residualRiskRatingComputeKey": null,
    "residualRiskRatingOverrideKey": null,
    "overallControlEffectivenessOverrideText": null,
    "residualRatingText": null,
    "residualRiskDirKey": null,
    "riskAcceptanceFlag": null,
    "riskAcceptanceComment": null,
    "residualRiskComment": null,
    "mssControlFlag": null,
    "ratingStatus": "RA_RT_NON_EDITABLE",
    "finalOutcomeInherentRiskRatingKey": 23
}
 if($scope.processRating.inherentRiskRatingKey === 'null' || $scope.processRating.finalOutcomeInherentRiskRatingKey ==='null' 
      || $scope.processRating.controlEffectivenessRatingComputeKey ==='null') {
        $scope.showEditdisForm = false;
    }

应该是:

if(!$scope.processRating.inherentRiskRatingKey 
      || !$scope.processRating.finalOutcomeInherentRiskRatingKey 
      || !$scope.processRating.controlEffectivenessRatingComputeKey ) {
        $scope.showEditdisForm = false;
    }

您将'null'用作字符串。你应该不加引号。此外,您可以和条件,而不是或。

if($scope.processRating.inherentRiskRatingKey === null && $scope.processRating.finalOutcomeInherentRiskRatingKey === null 
      && $scope.processRating.controlEffectivenessRatingComputeKey === null) {
        $scope.showEditdisForm = false;
    }

而不是检查

$scope.processRating.inherentRiskRatingKey === 'null' 

尝试使用

$scope.processRating.inherentRiskRatingKey == null