如果 AngularJs 中未选择 3 个下拉菜单，则隐藏标签

Question

我正在尝试做对我来说似乎很简单的事情。但由于我对 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() 将为所有 3 个下拉菜单调用 isUndefinedOrNull 函数，并且只有当它们都有值时才会返回 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 部分，检查第一个值，如果它不是 null 对象返回 true，然后检查第二个它是否为 null，它将返回 false，但无论如何它都会检查第三个值。所以我有点迷路了。 是否有人看到我做错了什么并且不清楚？

Answer 1

首先，您根本不需要checkIfAllValuesAreSelected()。您可以简单地将标签更改为：

<div class="col-md-2">
    <label ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">Your local time</label>
    <div>{{date | date:'yyyy-MM-dd hh:mm'}}</div>
</div>

然后从您的控制器中删除该功能并删除ng-change 属性，您应该一切就绪。由于ng-model 绑定，一旦三个值中​​的任何一个发生更改，Angular 就会自动更新标签的可见性。