通过角度要求验证选择下拉列表

时间:2014-04-22 14:18:54

标签: angularjs jquery-chosen

我正在使用angular jschosen插件进行下拉菜单。我想要一个验证器来显示下拉列表中没有选择任何内容。但由于chosen将某些selectdivs替换为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();
                })
            }
        }
    });

0 个答案:

没有答案