angular ui.select rendern nicht die Elemente

Question

Ich versuche, die eckige ui.select in mein Projekt mit Bootstrap-Thema zu implementieren, aber ich habe nichts als Probleme damit. Ich übergebe ein sehr einfaches Objekt mit wenigen Gegenständen. Hier ist Objekt, das ich

[Object { institution_type_id="1", institution_type_description="Post"}, Object { institution_type_id="2", institution_type_description="Security"}, Object { institution_type_id="3", institution_type_description="Mutual Fund"}, Object { institution_type_id="4", institution_type_description="Bank"}, Object { institution_type_id="5", institution_type_description="Life insurance"}] 

Es macht fein mit einem normalen wählen, wie unten gesehen passieren versuchen.

ich will und hier statt die Winkel ui.select verwenden ist mein Setup .. ich folgendes in meiner Hauptseite

<!-- Angular ui-select --> 
    <link rel="stylesheet" href="../bower_components/ui-select/dist/select.min.css" type="text/css" /> 

<!-- Angular ui-select --> 
<script src="../bower_components/ui-select/dist/select.min.js"></script> 
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script> 

ich die Bootstrap-Thema enthalten sind, verwenden möchten, so natürlich Bootstrap CSS enthalten ist auch

Jetzt in meinem app.js habe ich die

enthalten

ui.select

als Abhängigkeit

Hier ist, was ich in der Steuerung haben:

institutionService.getAllInstitutionTypes().then(function(data){  
     $scope.institutionTypes = data; 
    }); 

und hier ist mein html aussieht.

<div class="form-group required" ng-class="{ 'has-error': addEditInstitutionForm.institution_type_id.$invalid && addEditInstitutionForm.institution_type_id.$dirty}"> 
       <label for="institution_type_id" class="control-label col-xs-4">Institution Type</label> 
       <div class="col-xs-8"> 
        <ui-select ng-model="ctrl.country.selected" theme="bootstrap" style="width: 300px;" title="Choose Institution Type"> 
         <ui-select-match placeholder="Select or search institutionType...">{{$select.selected.institution_type_description}}</ui-select-match> 
         <ui-select-choices repeat="type in institutionTypes"> 
          <span ng-bind-html="type.institution_type_description"></span> 
          <small ng-bind-html="type.institution_type_id"></small> 
         </ui-select-choices> 
        </ui-select> 
       </div> 

wenn ich die Seite zu laden, es sieht aus wie die ui.select fein erbracht .. aber es gibt nichts in der Drop-Down-wie unten zu sehen.

was ich in der Konsole sehe, ist viele Fehler über $ sce: unsicher wie unten zu sehen.

Fragen sind nun:

1. Wie kann ich diese Fehler beheben, um den Drop-Down richtig zu machen.
2. Im Code-Snippet (http://angular-ui.github.io/ui-select/demo-basic.html) verweisen sie auf $ select an mehreren Stellen. Kann mir bitte jemand helfen, es zu verstehen?
3. Wie kann ich die angulare ui.select validieren, wenn es mir gelingt, das Problem zu beheben und es besser genug zu verstehen, um es in meinem Projekt zu verwenden.
4. Gibt es eine bessere und einfachere Auswahl als angular.ui select?

Danke.

Answer 1

Ein paar Probleme.

1. Need ngSanitize zu injizieren, wie folgt aus:

var app = angular.module('plunker', ['ui.select', 'ngSanitize']);

2. Sie sind in Ihrem ng-Modell das ControllerAs Muster verwenden, ctrl.country“ .ausgewählt“, aber nicht, wenn Ihre Option Array im Wiederholungs Attribut verweisen, "Typ in institutionTypes"

Controller:

var app = angular.module('plunker', ['ui.select', 'ngSanitize']); 

app.controller('MainCtrl', function($scope) { 

    var self = this; 

    self.institutionTypes = [{ 
    institution_type_id: "1", 
    institution_type_description: "Post" 
    }, { 
    institution_type_id: "2", 
    institution_type_description: "Security" 
    }, { 
    institution_type_id: "3", 
    institution_type_description: "Mutual Fund" 
    }, { 
    institution_type_id: "4", 
    institution_type_description: "Bank" 
    }, { 
    institution_type_id: "5", 
    institution_type_description: "Life insurance" 
    }]; 

    self.country = { 
    institution_type_id: "5", 
    institution_type_description: "Life insurance" 
    }; 

HTML:

 <ui-select ng-model="ctrl.country" theme="bootstrap"> 
     <ui-select-match placeholder="Select or search institutionType...">{{$select.selected.institution_type_description}}</ui-select-match> 
     <ui-select-choices repeat="type in ctrl.institutionTypes | filter: $select.search "> 
      <span ng-bind-html="type.institution_type_description | highlight: $select.search"></span> 
     </ui-select-choices> 
     </ui-select> 

});

Hier ist eine funktionierende plunker