Question

我正在尝试使用UI-Grid的editableCellTemplate选项和UI-Select创建一个自定义下拉菜单，其中包含由glyphicon和名称组成的选项。我使用这个tutorial作为灵感并添加了一些东西来使它与图标一起工作但是即使我在下拉列表中可以看到图标和名称，在我选择一个选项之后它会返回括号中的代码，而不是带有图标的图标文本。这是我的代码：

的index.html

<div ng-controller="MainCtrl">
   <div ui-grid="gridOptions" ui-grid-edit="" class="grid"></div>
</div>

uiSelect.html

<ui-select-wrap>
  <ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true">
    <ui-select-match placeholder="Choose...">{{ COL_FIELD }}</ui-select-match>
    <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">
      <div><span class="glyphicon glyphicon-{{item.icon}}"></span>{{item.name}}</div>
    </ui-select-choices>
  </ui-select>
</ui-select-wrap>

JS

angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.select'])
  .controller('MainCtrl', MainCtrl)
  .directive('uiSelectWrap', uiSelectWrap);

MainCtrl.$inject = ['$scope', '$http'];

function MainCtrl($scope, $http) {
  $scope.gridOptions = {
    rowHeight: 38,
    columnDefs: [{
      name: 'name'
    }, {
      name: 'age',
      type: 'number'
    }, {
      name: 'level',
      editableCellTemplate: 'uiSelect',
      editDropdownOptionsArray: [
        { name: 'n/a', icon: 'user', value: 'N/A' },
        { name: 'actively learning', icon: 'paperclip', value: 'ACTIVELY LEARNING' },
        { name: 'doing', icon: 'compressed', value: 'DOING' },
        { name: 'ready to teach', icon: 'hourglass', value: 'READY TO TEACH' },
        { name: 'teaching', icon: 'blackboard', value: 'TEACHING' },
        { name: 'tool building', icon: 'cutlery', value: 'TOOL BUILDING' },
        { name: 'inventing', icon: 'compressed', value: 'INVENTING' }
      ]
    }]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/v3.0.7/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}

uiSelectWrap.$inject = ['$document', 'uiGridEditConstants'];

function uiSelectWrap($document, uiGridEditConstants) {
  return function link($scope, $elm, $attr) {
    $document.on('click', docClick);

    function docClick(evt) {
      if ($(evt.target).closest('.ui-select-container').size() === 0) {
        $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
        $document.off('click', docClick);
      }
    }
  };
}

我也做了plunker。任何提示都表示赞赏。感谢

AngularJS UI-Grid和UI-选择以创建带有图标和文本选项的下拉列表

0 个答案: