1

I'm using jQuery multiple select with checkbox options here is my control

<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>

But the problem is that this control is placed inside the ng-controller and ng-app so of AngularJS. So when I open the controller and checked the checkbox inside it that it is not working like it suppose to work to do.

lin
  • 17,956
  • 4
  • 59
  • 83
Gaurav_0093
  • 1,040
  • 6
  • 28
  • 56
  • Why are you using jQuery? There are different multiselects which perfectly with angularjs apps and should be used: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main Or this one: http://isteven.github.io/angular-multi-select/#/main – pegla Dec 08 '17 at 08:57
  • Any feedback m8? – lin Feb 09 '18 at 12:30

2 Answers2

0

jQuery extensions causing a lot of problems in interaction with AngularJS. You may going to check this nice article about - “Thinking in AngularJS” if I have a jQuery background?. You need to create a directive or just use a select which is compatible with AngularJS. You may going to use ui-select which based on select2.

<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

lin
  • 17,956
  • 4
  • 59
  • 83
-1

remove attribute multiple="multiple" and try with

multiple="true"

Ritesh Ranjan
  • 21
  • 2