2015-09-16 14 views
6

Ich versuche, das ui-select-Direktive in meinem AngularJS zu verwenden, aber es wird nicht angezeigt, habe ich versucht, die Dokumentation folgende und das ist, was ich tat:Angular Bootstrap Ui-select

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-choices repeat="gender in genders"> 
     {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 

Dann habe ich eine Reihe von Geschlechtern:

$scope.genders = [ 
    { 
     name: 'Male' 
    }, 
    { 
     name: 'Female' 
    } 
]; 

ich habe diese Anweisung nicht wirklich genutzt, bevor so ich ein bisschen verwirrt, bin, was ich falsch mache.

Es werden keine Fehler in meiner Browserkonsole angezeigt, ich habe das Modul auch in meine App aufgenommen.

Ich möchte es für mehr als ein einfaches Dropdown von Geschlechtern verwenden, aber ich denke, das ist ein Anfang, wenn ich das tun kann, dann werde ich keine Probleme mehr haben. :)

Edit: So gelöscht i mein Browser-Cache und aktualisiert meine Seite und dieses Mal habe ich einen Fehler bemerken:

Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'. 

Antwort

1

Sie müssen diesen Link besuchen und Beispiele folgen.

You can follow its examples

Ich persönlich bevorzuge die Verwendung uiselect2, seine leistungsfähiger und einfacher als uiselect

link of uiselect2

+0

ich den Link gefolgt und sah, was ich falsch gemacht habe jedoch auch nachdem ich gelesen hatte, was sie dort hatten, bin ich immer noch ratlos, wie die ui-select- und ui-select-match- und ui-select-wahlen funktionieren oder was diese Direktiven überhaupt tun. – user3718908

+0

Auch wenn ich versuche, die 'selecticize' zu verwenden, erhalte ich Fehler: http://prntscr.com/8gx7ax – user3718908

+0

Ich persönlich bevorzuge die Verwendung von uiselect2, es ist so einfach und mächtig als uiselect [link] (https: // github. com/angular-ui/ui-select2), wenn du deine Antwort erhalten hast, bitte als Antwort markieren :) –

4

nur eine Klasse hinzufügen, um den Tag benannt.

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-choices class="ui-select-choices" repeat="gender in genders"> 
     {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 
+2

Hinzufügen von ui-select-match ist auch erforderlich, wenn Sie es verwenden – Dhyey

+0

Arbeitete für mich. Das Problem war mit der Klasse, es muss dasselbe sein wie die der Richtlinie. –

0

.ui-select-Toggle> .caret {Zeiger-Ereignisse: none} behebt das Problem der Fehler: [ui.select:transcluded] Erwartete 1 .ui-select-Match bekam aber ‚0 ". für mich

0

Als @Caner Çakmak sagte, habe ich eine Klasse als Tag in beiden ui-select-Auswahl genannt und ui-select-Spiel

Ex:

<ui-select ng-model="form.gender" theme="bootstrap"> 
    <ui-select-match class="ui-select-match" [etc...etc....etc]> 
    <ui-select-choices class="ui-select-choices" repeat="gender in genders"> 
    {{ gender.name }} 
    </ui-select-choices> 
</ui-select> 

Und es hat funktioniert! Dank

PS: Ich bin mit ui-select v0.19.X und Angular v1.5.X (das scheint zu sein, wenn dieser Fehler auftritt)