web-dev-qa-db-fra.com

AngularJS ng-repeat dans la liste déroulante Bootstrap multiselect

J'ai utilisé Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ & incorporer dans le sous-modèle de AngularJS et le laisser fonctionner avec la fonction suivante:

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

J'ai continué à utiliser ng-repeat pour imprimer les options intérieures de cette entrée, sélectionnez:

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

Mais lorsque ng-repeat est dans cette sélection d'entrée, cela ne fonctionne pas et n'imprime aucune donnée ... Tout le monde sait comment résoudre ce problème, aidez-moi!

twitter-bootstrapangularjsmulti-selectangularjs-ng-repeat
12
Oc Chuoj Dau

Si vous utilisez bootstrap-multiselect, vous devez utiliser l'attribut ng-options, comme dans @ user2598687 answer . Voici la version de fiddle qui fonctionne avec firefox: cliquez-moi sur 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"}];
9
Aleksey

vous pouvez essayer de regarder le problème, https://github.com/davidstutz/bootstrap-multiselect/issues/128 et le violon js, http://jsfiddle.net/58Bu3/1/ en tant que les deux sont liés à l'utilisation de js angulaire avec bootstrap-multiselect. Voici comment je l'ai utilisé pour créer le violon.

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

L’exemple est fonctionnel, alors allez-y et essayez-le.

6
user2598687

Je viens de traiter ce problème !! Au lieu d'essayer d'utiliser ng-repeat, vous pouvez ajouter des options de manière dynamique avec quelque chose comme:

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

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

Je cherchais moi-même un menu déroulant multisélect. Je me suis mis à travailler moi-même cette solution avec Long2Know. J'ai même eu la multisélection dans une interface utilisateur modale, ce qui était mon objectif initial. 

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

0
JEuvin