我正在使用angular js
和chosen
插件进行下拉菜单。我想要一个验证器来显示下拉列表中没有选择任何内容。但由于chosen
将某些select
和divs
替换为uls
,而select
被隐藏,因此验证无效。有没有办法用angular
实现这个目标?这是我的代码:
<form class="form-horizontal" role="form" novalidate name="newEmployeeForm">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">User</label>
<div class="col-sm-8">
<select class="form-control" name="user" data-placeholder="Choose a user" ng-model="selectedUser" ng-options="u.fullName for u in users" list="users" chosen required></select>
</div>
<span class="error" data-ng-show="newEmployeeForm.user.$error.required">*</span>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" placeholder="Email" ng-model="employee.email" required>
</div>
<span class="error" data-ng-show="newEmployeeForm.email.$error.required">*</span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" ng-click="save()" data-ng-disabled="newEmployeeForm.$invalid">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
指令:
app.directive('chosen', function () {
return {
replace: true,
restrict: 'A',
scope: {
list: "="
},
link: function (scope, element, attr) {
scope.$watch('list', function (newVaue, oldValue) {
if (newVaue == oldValue) {
return;
}
element.chosen();
})
}
}
});