角度 ui.select 不呈现项目

Question

我正在尝试使用引导主题将 angular 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"}]

使用如下所示的常规选择可以很好地呈现。

我想改用 angular 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 主题，所以当然也包括 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:unsafe 的错误，如下所示。

现在的问题是：

1. 如何修复这些错误以正确呈现下拉菜单。
2. 在代码 sn-p (http://angular-ui.github.io/ui-select/demo-basic.html) 中，他们在几个地方引用了 $select。有人可以帮我理解吗？
3. 如果我设法解决问题并更好地理解它以在我的项目中使用它，我该如何验证 angular ui.select。
4. 还有比 angular.ui select 更好、更简单的选择吗？

谢谢。

Answer 1

几个问题。

1. 需要注入ngSanitize，像这样：

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

1. 您在 ng 模型“ctrl.country.selected”中使用了 ControllerAs 模式，但在重复属性“type in authorityTypes”中引用选项数组时没有使用

控制器：

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