Angular.js data-toggle =下拉列表不适用于Select Option

时间:2018-07-04 16:36:38

标签: angularjs angularjs-directive

在“我的代码”中,我使用了使用ng-repeat的简单下拉绑定选项,但是当我绑定该选项时,由于启用了某些额外的类,因此它无法显示任何内容。我的正常代码是:

    <div class="col-md-6 col-sm-12">
     <label>Select Employee</label>

     <select class="form-control show tick" id="selectEmp" name="toEmployeeCode" required="" ng-model="toEmployeeCode">
     <option value="">Select Team Member</option>
         <option ng-repeat="x in AllEmployee" value="{{x.EmployeeCode}}">{{x.FirstName}} {{x.MiddleName}} {{x.LastName}}</option>
           </select>
          </div>

但是当它加载显示时

  <div class="btn-group bootstrap-select form-control tick">
   <button type="button" class="btn dropdown-toggle bs-placeholder btn-round 
     btn-simple" data-toggle="dropdown" role="button" data-id="selectEmp" 
      title="Select Team Member" aria-expanded="false">
       <span class="filter-option pull-left">Select Team Member</span>&nbsp; 
           <span class="bs-caret"><span class="caret"></span></span>
  </button>

   <div class="dropdown-menu" role="combobox">
    <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
      <li data-original-index="0" class="selected">
         <a tabindex="0" class="" data-tokens="null" role="option" aria- 
           disabled="false" aria-selected="true">
            <span class="text">Select Team Member</span>
                <span class="glyphicon glyphicon-ok check-mark"></span>
                   </a>
       </li>
        <li data-original-index="1">
             <a tabindex="0" class="" data-tokens="null" role="option" aria- 
                disabled="false" aria-selected="false">
               <span class="text ng-binding">  </span>
               <span class="glyphicon glyphicon-ok check-mark"></span>
             </a>
        </li>
       </ul>
  </div>
     <select class="form-control show tick ng-pristine ng-untouched ng- 
        invalid ng-invalid-required" id="selectEmp" name="toEmployeeCode" 
         required="" ng-model="toEmployeeCode" tabindex="-98" aria- 
      required="true">
           <option value="">Select Team Member</option>
        <option ng-repeat="x in AllEmployee" value="EMP-1004" class="ng- 
            binding ng-scope">ABC</option> 
           <option ng-repeat="x in AllEmployee" value="EMP-1007" class="ng- 
           binding ng-scope">PQR</option>
           <option ng-repeat="x in AllEmployee" value="EMP-1008" class="ng- 
                  binding ng-scope">ASD</option>
           <option ng-repeat="x in AllEmployee" value="EMP-1009" class="ng- 
            binding ng-scope">ZXC</option>
           <option ng-repeat="x in AllEmployee" value="EMP-1010" class="ng- 
             binding ng-scope">HUK</option>
                                        </select>
      </div>

但是当我使用我的代码时它将无法显示

我使用angularjs

      var app = angular.module('App', ['ui.router','ui.bootstrap']);

1 个答案:

答案 0 :(得分:0)

请勿在{{1​​}}中使用ng-repeat,它无法正常工作。在选择中使用ng-options

Stop ng-repeating options: use ng-options