AngularJS表单验证的引导下拉

Question

是否有可能将AngularJS添加到Boostrap下拉列表中（而不是<select/>，而是Javascript组件）？这是我有：

<div class="form-group has-feedback" ng-class="{'has-error': editorForm.example.$invalid && !editorForm.example.$pristine, 'has-success': editorForm.example.$valid && !editorForm.example.$pristine}"> 
     <label for="example">Example</label> 

     <div class="dropdown" id="example" style="width: 90%"> 
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdown" 
        data-toggle="dropdown"> 
       {{exampleLabel}} 
       <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
       <li data-ng-repeat="example in examples" role="presentation"><a 
         role="menuitem" tabindex="-1" 
         data-ng-click="selectExample(example)" 
         href="javascript:void(0);">{{example.label}}</a> 
       </li> 
      </ul> 
     </div> 

$scope.selectExample = function(val) { 
    $scope.example = val; 
} 

有没有办法对我来说，编程设定的有效性selectExample？

Answer 1

加入这个隐藏的文本框：

<input type="text" name="exampleLabel" ng-model="exampleLabel" hidden required /> 

，并且下拉

<span class="text-danger" ng-show="myForm.exampleLabel.$error.required"> 
        validation message 
       </span> 

Answer 2

这工作me.hope你可以得到一些想法后添加此验证。

<style>

.dropdown-has-error{ 
    border-color: #a94442;//bootsrtap warning color 
} 

</style> 

添加ng-class指令的下拉按钮

ng-class="{'dropdown-has-error' : example == ''} 

控制器

$scope.example = ''; 

$scope.selectExample = function(val) { 
    $scope.example = val; 
} 

，或者你可以检查的条件，如上面的帖子，

ng-class="{'dropdown-has-error' : myForm.exampleLabel.$error.required}