角ui.select不呈現項目

Question

我想實現角ui.select到我的項目使用引導主題，但我沒有什麼，但它的問題。我正在傳遞一些非常簡單的物品。 這裏是我試圖通過

[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"}] 

它使用的是常規選擇，如下圖所示呈現的微小物體。

我想使用的角度，而不是ui.select，這裏是我的設置.. 我已經包含在我的主網頁下面

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

我想用bootstrap主題所以當然引導CSS也被包括在我的app.js

現在，我已經包括了

ui.select

的依賴

這是我在控制器：

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

，這裏是我的html的模樣。

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

當我加載頁面時，它看起來像ui.select已呈現罰款..但下拉內沒有任何內容，如下所示。

我在控制檯中看到很多關於$ sce的錯誤：不安全，如下所示。

問題現在：

1. 我怎樣才能修復這些錯誤，以正確地呈現下拉。
2. 在代碼片段（http://angular-ui.github.io/ui-select/demo-basic.html）中，他們引用了幾個地方的$ select。有人能幫我理解嗎？
3. 我如何驗證角度ui.select，如果我設法解決問題並更好地理解它，以便在我的項目中使用它。
4. 有沒有比angular.ui選擇更好，更簡單的選擇？

謝謝。

Answer 1

幾個問題。

1. 需要注入ngSanitize，像這樣：

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

您正在使用您的NG-模型ControllerAs模式，「ctrl.country 。選擇」，但不引用在重複屬性的選項陣列中，當 「類型中institutionTypes」

控制器：

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> 

}）;

這是一個工作plunker