jQuery 多选不适用于 AngularJS

Question

我正在使用带有复选框选项的 jQuery 多选，这是我的控制

<div id="main-wrapper" ng-app="MyApp">
    <div ng-controller="ngCtrl" style="background:#efefef; border-radius:5px; padding:15px; margin:15px 0px;">
        <label class="col-md-4 control-label" for="rolename">Role Name</label>
        <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
            <option value="cheese">Cheese</option>
            <option value="tomatoes">Tomatoes</option>
            <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
            <option value="pepperoni">Pepperoni</option>
            <option value="onions">Onions</option>
        </select>
    </div>
</div>

但问题是这个控件放在AngularJS的ng-controller和ng-app里面。因此，当我打开控制器并检查其中的复选框时，它没有像预期的那样工作。

Answer 1

jQuery 扩展在与 AngularJS 的交互中造成了很多问题。您可能会查看这篇关于 - “Thinking in AngularJS” if I have a jQuery background? 的好文章。您需要创建一个指令或只使用与 AngularJS 兼容的选择。您可以使用基于 select2 的ui-select。

<div ng-app="app" ng-controller="myCtrl as vm">
  <ui-select multiple tagging ng-model="vm.selected" theme="bootstrap">
    <ui-select-match placeholder="Pick one...">{{$item.value}}</ui-select-match>
    <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value">
      <div ng-bind="val.value | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

> Demo fiddle

Answer 2

删除属性 multiple="multiple" 并尝试使用

多个=“真”