Question

我正在尝试使用bootstrap主题将角度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主题，所以当然也包括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的错误：不安全，如下所示。

现在的问题是：

如何修复这些错误以正确呈现下拉列表。
在代码段（http://angular-ui.github.io/ui-select/demo-basic.html）中，他们在几个地方引用$ select。有人可以帮我理解吗？
如果我设法解决问题并更好地理解它以便在我的项目中使用它，我如何验证角度ui.select。
有没有比angular.ui select更好更简单的选择？

感谢。

Answer 1

有几个问题。

需要注入ngSanitize，如下所示：

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

您正在使用ng-model中的ControllerAs模式“ctrl.country.selected”，但在重复属性中引用您的选项数组时却没有，“输入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

angular ui.select不渲染项目

1 个答案: