如果在AngularJs中没有选择3个下拉列表，隐藏标签

我正在努力做一件对我来说似乎很简单的事情。但由于我对angular非常陌生，而且大多有后端技术经验，我不禁要问，如果条件在angular中与在其他编程语言中有不同的行为吗?

我想做的是:

• 我有3下拉，和隐藏的标签。如果所有3个下拉框都选择了值，我只想显示标签。

我现在写的代码是:

控件代码:

在选择元素上，我设置了ng-change，所以每次当用户做一些更改时，函数都会被触发。

<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid }">
    <label for="sessionStartTime">Session Start Time<span class="mandatory">*</span></label>
    <select id="sessionStartTime" name="sessionStartTime" class="form-control" 
        ng-model="newTestSessionCtrl.formData.sessionTime"
        ng-options="time for time in newTestSessionCtrl.viewData.sessionStarTimeIntervals"
        ng-required="true"
        ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()">
        <option value="" disabled selected>Select</option>
    </select>
    <span ng-show="addNewTestSession.sessionStartTime.$touched && addNewTestSession.sessionStartTime.$invalid" 
        class="fa fa-warning form-control-feedback"
        uib-popover="This field is required." 
        popover-trigger="'mouseenter'"
        popover-placement="auto right"
        popover-class="additional-info"></span>             
</div>
<div class="col-md-1">
    <label for="timeZone">Time zone</label>
    <select id="timeZone" name="timeZone" class="form-control"
        ng-init="newTestSessionCtrl.formData.timeZone = newTestSessionCtrl.viewData.timeZones[15]" 
        ng-model="newTestSessionCtrl.formData.timeZone"
        ng-options="timeZone.name for timeZone in newTestSessionCtrl.viewData.timeZones track by timeZone.name"
        ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()">
    </select>
</div>
<div class="col-md-2" ng-class="{ 'has-error has-feedback': addNewTestSession.sessionCloseTime.$touched && addNewTestSession.sessionCloseTime.$invalid }">
    <label for="sessionCloseTime">Session to start within<span class="mandatory">*</span> 
        <i class="fa fa-question-circle" 
            uib-popover="Interviewee must start the Personal Test Session within this time-window counted from the session's start date & time." 
            popover-trigger="'mouseenter'"
            popover-placement="auto right"
            popover-class="additional-info"></i>
    </label>
    <select id="sessionCloseTime" name="sessionCloseTime" class="form-control" 
        ng-model="newTestSessionCtrl.formData.sessionCloseInterval"
        ng-options="time.name for time in newTestSessionCtrl.viewData.sessionCloseIntervals"
        ng-required="true"
        ng-change="newTestSessionCtrl.checkIfAllValuesAreSelected()">
        <option value="" disabled selected>Select</option>
    </select>
    <span ng-show="addNewTestSession.sessionCloseTime.$touched && addNewTestSession.sessionCloseTime.$invalid" 
        class="fa fa-warning form-control-feedback"
        uib-popover="This field is required." 
        popover-trigger="'mouseenter'"
        popover-placement="auto right"
        popover-class="additional-info"></span>             
</div> 

在标签上我放了ng-show属性，它将根据函数的结果为真或假:

<div class="col-md-2">
    <lable ng-show="newTestSessionCtrl.checkIfAllValuesAreSelected()">Your local time</lable>
    <div>{{date | date:'yyyy-MM-dd hh:mm'}}</div>
</div>

Angular的功能是这样的:

两个非常简单，直接的函数:isUndefinedOrNull将检查下拉列表的值是否为某个对象或null或未定义，并返回布尔值

checkIfAllValuesAreSelected()将调用isUndefinedOrNull函数为所有3个下拉菜单，只有当它们都有值，它将返回true，否则将为false。

    isUndefinedOrNull(val) {
        return angular.isUndefined(val) || val === null; 
    }
    checkIfAllValuesAreSelected() {
        if (this.isUndefinedOrNull(this.formData.sessionCloseInterval) && this.isUndefinedOrNull(this.formData.timeZone)
            && this.isUndefinedOrNull(this.formData.sessionTime)) {
            return false;
        }
        else{
            return true;
        }
    }

结果是什么:标签总是可见的，当我在Chrome功能中使用调试模式时，会多次重新访问。我感觉到了if部分，检查第一个值，如果它不是空对象返回真，然后检查第二个如果它是空它将返回假，但无论如何它会检查第三个值。所以我有点迷路了。有人看到我做错了什么，不清楚吗?