Question

我有两个下拉形式。第一个下拉列表有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>

正如您所见，总是需要'subevent'下拉列表。如果只有里面有值，我怎么才能把它改成需要？

Answer 1

您可以为ng-required提供条件。

您没有提供控制器代码，但我会假设<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" >在空时等于<tr *ngFor = "let task of tasklist.task"> <td>{{task.id}}</td> <td *ngIf="Display == true">{{task.title}}</td> <td *ngIf="Display == true">{{task.author}}</td> <td *ngIf="Display == false"> <input placeholder = 'Username'></td> <td *ngIf="Display == false"> <input placeholder = 'Title'></td> <td> <a class="btn btn-Danger" (click) = Temp() > Edit </a> <a class="btn btn-Danger" (click) = Delete(task) > Delete </a> </td> </tr> <tr> <td><input placeholder = 'ID' [(ngModel)] = 'newTaskid' ></td> <td><input placeholder = 'Username' [(ngModel)] = 'newTasktitle' ></td> <td><input placeholder = 'Title' [(ngModel)] = 'newTaskauthor' ></td> <td> <Button class="btn btn-link" (click) = Edit(newTaskid,newTasktitle,newTaskauthor)> Save </Button> </td> </tr> </table> </div> ` }) export class TasksComponent implements OnInit { sample:string = "" Display:boolean = true; constructor(public tasklist: TaskService , private router: Router) { } ngOnInit() { this.tasklist.getItems(); } Delete(value) { this.tasklist.delete(value); } OnClick(id,title,author) { this.tasklist.postitems(id,title,author); } Edit(newTaskid,newTasktitle,newTaskauthor) { debugger; this.tasklist.putItems(newTaskid,newTasktitle,newTaskauthor); } Temp() { this.Display = false; } }。

你的情况是

=DATE(2016,11,28)

Answer 2

尝试类似：

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

只有在AngularJs中有值时才需要下拉

2 个答案: