Question

预先形成操作的最简单方法是检查是否选择了3个下拉列表中的值，如果是，它们将使用AngularJs显示带有某些内容的标签。

我有这3个下降：

<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">
        <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">
    </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">
        <option value="" disabled selected>Select</option>
        </select>
</div>

我想检查他们所有人选择价值的时间，然后说出他们旁边只显示“你好”的标签。

在AngularJs中执行此操作的最佳方法是什么？

Answer 1

一种方法是明确检查它是否被选中。

<span ng-show="newTestSessionCtrl.formData.sessionTime && newTestSessionCtrl.formData.timeZone && newTestSessionCtrl.formData.sessionCloseInterval">Hello</span>

如果您确定这3个选择选项是表单中的唯一输入，并且唯一的验证是ng-required，则可以：

<form name="formName">
    <span ng-show="!formName.$invalid">Hello</span>
</form>

Answer 2

尝试在范围/控制器中创建一个返回true / false的函数，如下所示：

newTestSessionCtrl.isAllSelected = function(){
  // rules
  return newTestSessionCtrl.formData.timeZone === 3 && newTestSessionCtrl.formData.sessionCloseInterval === 3 && newTestSessionCtrl.formData.sessionTime === 3;
}

在函数内编写自己的规则。这只是一个样本。

在你的HTML中：

<label ng-show="newTestSessionCtrl.isAllSelected()"> all selected!</label>

在Angularjs中选择3选择框中的值时显示标签

2 个答案: