select2.js在ngRepeat AngularJS中不起作用

时间:2018-04-09 12:19:02

标签: angularjs twitter-bootstrap jquery-select2 angularjs-select2

我使用的是AngularJS 1.2.12,select2.js。 我有用户表,每个用户都有一些国家,对于这个国家,我使用的是select2。但它不起作用,它被渲染为普通文本框。

    <script type="text/javascript">
<script src="static/js/angular.min.js"></script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/star-rating.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="static/js/select2.js"></script>
<script src="static/js/admin.js"></script>
<script src="static/js/dirPagination.js"></script>
    </script>
    <table class="table table-striped table-bordered table-hover" id="demo">
            <thead>
              <tr>
                <th width="4%">Sl.No</th>
                <th>Name</th>
                <th width="30%" >Country</th>   
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="x in userObj">
                <td>{{$index+1}}</td>
                <td>{{x.username}}</td>
                  <td>
                  <div class="form-group m0b">
                    <select id="source">
                    <option>india</option>
                    <option>US</option>
                    </select>
           <select multiple name="e9" id="e9" class="populate"></select>
                  </div></td>
                <td><button type="button" class="btn btn-sm btn-toggle active" data-toggle="button" aria-pressed="true" autocomplete="on">
    <div class="handle"></div>
 </button></td>
                <td>
                    <button type="button" class="btn btn-default btn-xs edit" data-toggle="modal" title="Update"
                                                    data-target="#recruiters" data-backdrop="static"
                                                    data-keyboard="false"
                                                    ng-click="editRoleBtn(x.username,x.Selected,x.Selected_Admin)">
                                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                </button>
                  <button type="button" class="btn btn-danger btn-xs del" ng-click="deleteUser(x.username)" data-toggle="modal" data-target="#deleteUser" data-backdrop="static" data-keyboard="false"><i class="fa fa-remove"></i></button></td>
              </tr>
            </tbody>
          </table>

在国家/地区td我正在尝试使用select2但它无法正常工作

1 个答案:

答案 0 :(得分:0)

将指令应用于表单元素:

<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
    <option value=""></option>
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

snack指令非常适合ng-model和验证指令,例如ng-required。

如果将ng-model指令添加到与ui-select2相同的元素,则拾取的选项将自动与模型值同步。