it-swarm.com.de

AngularJS ng-repeat im Bootstrap-Multiselect-Dropdown

Ich habe Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/ & embed in die Untervorlage von AngularJS eingesetzt und mit der folgenden Funktion ausführen lassen:

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

Ich habe weiterhin mit ng-repeat die inneren Optionen dieser Eingabeauswahl gedruckt:

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

Aber wenn ng-repeat in dieser Eingabe ausgewählt ist, hat es nicht funktioniert und es wurden keine Daten gedruckt. Jeder weiß, wie man dieses Problem löst, bitte helft mir !!

12
Oc Chuoj Dau

Wenn Sie bootstrap-multiselect verwenden, sollten Sie das Attribut ng-options verwenden, wie in @ user2598687 antwort . Hier eine Version von Fiddle, die mit Firefox funktioniert: klicken Sie auf 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

sie können versuchen, einen Blick auf die Ausgabe, https://github.com/davidstutz/bootstrap-multiselect/issues/128 und die js-Geige, http://jsfiddle.net/58Bu3/1 zu werfen/ da sich beide auf die Verwendung von eckigen Js mit Bootstrap-Multiselect beziehen. So habe ich es benutzt, um die Geige zu erschaffen.

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

Das Beispiel ist ein funktionierendes Beispiel, probieren Sie es aus.

6
user2598687

Ich habe mich gerade mit diesem Problem befasst !! Anstatt ng-repeat zu verwenden, können Sie Optionen mit folgendem Befehl dynamisch hinzufügen:

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

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

Ich habe selbst nach einem Multiselect-Dropdown gesucht. Ich habe mir vorgenommen, diese Lösung selbst mit Long2Know zu bearbeiten. Ich bekam sogar die Multiselect in einem UI Modal, was mein ursprüngliches Ziel war. 

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