AngularJS ng-repeat in Bootstrap multiselect dropdown

Question

I used Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ & embed into the sub-template of AngularJS & let it run with the following function:

$scope.$on('$viewContentLoaded', function () {
    $(document).ready(function() {
        $('#example27').multiselect({
            includeSelectAllOption: true
        });
    });
});

I continued using ng-repeat to print the inside options of this input select:

    <select id="example27" multiple="multiple">
        <option ng-repeat="list in lists" value="{{list.id}}">{{list.name}}</option>
    </select>

But when ng-repeat is in this input select, it did not work & didn't print any data. Anybody knows how to solve this problem, please help me!!

Where have you written the code to watch $viewContentLoaded? In your controller or is it in a directive? — callmekatootie
– callmekatootie, Commented Jun 5, 2013 at 6:57
I wrote it in Controller. paste.laravel.com/v5k . It worked. But when putting ng-repeat into it (view section), then ng-repeat is disabled. Tks @callmekatootie — Oc Chuoj Dau
– Oc Chuoj Dau, Commented Jun 5, 2013 at 7:11
Why don't you move the code into a directive? AFAIK, jQuery based DOM manipulation should be strictly kept out of the controllers. docs.angularjs.org/misc/faq#commonpitfalls - this section describes it in detail. Move the code from the controller to a directive and then try. Also, have you tried putting the above code inside $scope.$apply(<code here>)? — callmekatootie
– callmekatootie, Commented Jun 5, 2013 at 8:36
@callmekatootie It seems to be difficult to move to directive :| — Oc Chuoj Dau
– Oc Chuoj Dau, Commented Jun 5, 2013 at 17:13
Please select the answer for your question. I am looing for the Solution for this question. — Dinesh
– Dinesh, Commented Apr 17, 2014 at 14:50

Aleksey · Accepted Answer · 2014-02-07 15:10:57Z

10

If you use bootstrap-multiselect you should use ng-options attribute, like in @user2598687 answer. Here version of fiddle that works with firefox: click me to jsfiddle

<select class="multiselect" data-placeholder="Select Products" 
  ng-model="productSelection" ng-options="item.id as item.name for item in Products"
  multiple="multiple" multiselect-dropdown >
$scope.Products = [{id:1,name:"Apple"}, {id:2,name:"Banana"}, {id:3,name:"Carrort"}, {id:4,name:"Dart"}];

answered Feb 7, 2014 at 15:10

Aleksey

1091 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Scheper Over a year ago

Verified that it works in both Firefox and Chrome under both GNOME/Mint 14 and whatever version of Windows I have to use at work.

user2598687 · Accepted Answer · 2013-07-19 08:48:27Z

6

you may try to take a look at the issue, https://github.com/davidstutz/bootstrap-multiselect/issues/128 and the js fiddle, http://jsfiddle.net/58Bu3/1/ as both are related to use of angular js with bootstrap-multiselect. Here is how I have used it in creating the fiddle.

<select class="multiselect" data-placeholder="Select Products" 
            ng-model="productSelection" ng-options="item as item for item in Products"
            multiple="multiple" multiselect-dropdown >

            </select>
<p>Selection: {{productSelection}}</p>

The example is a working one, so go ahead and try it.

answered Jul 19, 2013 at 8:48

user2598687

955 bronze badges

3 Comments

Vincenzo Over a year ago

Your solution is working on chrome for me but not with firefox :/

tcmb Over a year ago

@user2598687 if i could upvote ten times, i'd do it. thanks in particular for the fiddle, for me it came down to certain versions of bootstrap and bootstrap-ui.

Larry Eitel Over a year ago

@toregua is correct, it does not 'check' the selected items in Firefox (latest version). Is there a work-around?

Brendan W · Accepted Answer · 2015-07-24 05:59:34Z

0

I just dealt with this issue!! Instead of trying to use ng-repeat, you can add options dynamically with something like this:

var topicSelect = document.getElementById("topic-select");

for (topic in scope.topicList) {
    topicSelect.add(new Option(scope.topicList[topic], scope.topicList[topic]));
}

answered Jul 24, 2015 at 5:59

Brendan W

3,4733 gold badges20 silver badges37 bronze badges

Comments

JEuvin · Accepted Answer · 2016-05-05 13:00:14Z

I been looking for a multiselect dropdown myself. I eneded up working this solution myself using Long2Know. I even got the multiselect in a UI Modal, which was my original goal.

var myApp = angular.module('myApp', ['long2know', 'ui.bootstrap']);

myApp.controller('testCtr', function($scope, $uibModal) {
  $scope.test = function() {
    $scope.colors = [{
      name: 'black'
    }, {
      name: 'white'
    }, {
      name: 'red'
    }, {
      name: 'blue'
    }, {
      name: 'purple'
    }, {
      name: 'pink'
    }, {
      name: 'brown'
    }, {
      name: 'yellow'
    }];

    $uibModal.open({
      template: "<multiselect class='input-xlarge multiselect' ng-model='myColor' options='color.name for color in colors' multiple='true' required enable-filter='true' filter-placeholder='Filter stuff..'></multiselect>",
      controller: 'newCtrl',
      resolve: {
        colors: function() {
          return $scope.colors;
        }
      }
    });
  }
});

myApp.controller('newCtrl', function($scope, colors) {
  $scope.colors = colors;
});

Plunker

Collectives™ on Stack Overflow

AngularJS ng-repeat in Bootstrap multiselect dropdown

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related