仅当它在 AngularJs 中有值时才需要下拉

Posted 2023-05-09

【中文标题】仅当它在 AngularJs 中有值时才需要下拉

【英文标题】：Make drop down required only if it has values in AngularJs

【发布时间】：2017-04-07 05:42:08

【问题描述】：

我有两个下拉菜单。第一个下拉菜单有 4 个值，但只有在第一个下拉菜单中选择索引为 3 的值时，第二个下拉菜单才有值，否则为空。

代码我总是预先进行验证并检查两个下拉菜单是否都有值。 只有在其中包含值的情况下，是否有一种简单的方法来预先验证第二个下拉列表？ 换句话说，如果下拉列表不为空，则用户必须选择值。

这是我的下拉代码：

<form name="addNewTestSession" class="form-horizontal" novalidate>
    <div class="row">
        <div class="col-md-2" ng-class=" 'has-error has-feedback': addNewTestSession.event.$touched && addNewTestSession.event.$invalid ">
            <label for="event">Event<span class="mandatory">*</span></label>
            <select id="event" name="event" class="form-control" ng-model="newTestSessionCtrl.formData.event" 
                ng-options="event.name for event in newTestSessionCtrl.viewData.events"
                ng-required="true">
                <option value="" disabled selected>Select</option>
            </select>
            <span ng-show="addNewTestSession.event.$touched && addNewTestSession.event.$invalid" 
                class="form-control-feedback fa fa-warning"
                uib-popover="This field is required." 
                popover-trigger="'mouseenter'"
                popover-placement="auto right"
                popover-class="additional-info"></span>
        </div>
        <div class="col-md-2" ng-class=" 'has-error has-feedback': addNewTestSession.subevent.$touched && addNewTestSession.subevent.$invalid ">
            <label for="subevent">Sub-Event<span class="mandatory">*</span></label>
            <select id="subevent" name="subevent" class="form-control" ng-model="newTestSessionCtrl.formData.subevent" 
                ng-options="subevent.name for subevent in newTestSessionCtrl.formData.event.subevents"
                ng-required="true">
                <option value="" disabled selected>Select</option>
            </select>
            <span ng-show="addNewTestSession.subevent.$touched && addNewTestSession.subevent.$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>
</form>

正如您所见，“子事件”下拉菜单始终是必需的。仅当它内部有值时，我如何才能将其更改为必需？

【参考方案1】：

你可以给 ng-required 一个条件。

您没有提供控制器代码，但我会假设 newTestSessionCtrl.formData.event.subevents 为空时等于 []。

那么你的条件是

<select id="subevent" name="subevent" class="form-control" 
    ng-model="newTestSessionCtrl.formData.subevent" 
    ng-options="subevent.name for subevent in newTestSessionCtrl.formData.event.subevents"
    ng-required="newTestSessionCtrl.formData.event.subevents.length > 0"
>

【参考方案2】：

尝试类似：

ng-required="newTestSessionCtrl.formData.event.subevents.length > 0"