Question

我想显示一个组合框，其所有选项字体都不同。

在AngluarJS中使用ng-options指令填写<select>标签的选项时，我无法弄清楚如何为每个选项设置font-family。

$scope.reportFontload=["Andale Mono","Arial","Arial Black","Bitstream Charter","Century Schoolbook L","Comic Sans MS","Courier 10 Pitch","Courier New","DejaVu Sans"];

<select ng-options="font for font in reportFontload" ng-model="selected">
 <option value="" disabled selected>Font Family</option>        
 </select>

对于ng-repeat，如果我用来申请style="font-family:{{font}}"。它适用于ng-repeat中的每个选项。

以下是示例：fiddle

<select ng-model="selected">
  <option value="" disabled selected>Fonts</option> 
  <option ng-repeat="font in reportFontload" value={{font}} style="font-family:{{font}}">{{font}}</option>
</select>

我需要知道，为什么font-family不适用于ng-option。指导我任何可能的答案。

Answer 1

我创建了一个optionsAttribute指令，可以在ngOptions呈现选项标记的属性后对其进行转换。

<强> DEMO

指令

.directive('optionsAttribute', function($parse, $timeout) {
  return {
    restrict: 'A',
    compile: function(tElem, tAttr) {
      var transform = $parse(tAttr.optionsAttributeTransform);
      return function(scope, elem, attr) {
        scope.$watch(attr.optionsAttribute, function(data) {

          var options = elem.children();
          options = Array.prototype.slice.call(options, options.length - data.length);

          angular.forEach(options, function(option, index) {
            var optionElement = angular.element(option);
            var newAttribute;
            var label;

            if(angular.isDefined(attr.optionsAttributeTransform)) {
              newAttribute = transform(scope, { 
                $data: data[index],
                $label: option.innerHTML,
                $index: index
              });

              angular.forEach(newAttribute, function(value, attribute) {
                optionElement.attr(attribute, value);
              });
            }

          });

        });
      };
    }
  };
});

用法的

提供ngOptions指令中optionsAttribute指令中提供的数组值。

e.g。

<select ng-options="font for font in reportFontload"
        options-attribute="reportFontload">
</select>

在optionsAttributeTransform指令中添加一个回调函数，该指令返回一个json对象，该对象表示要在每个option s标记中追加的属性。回调本身提供了2个值：

$ data - 表示＃1中提供的数组中的每个项目。

$ index - 代表$data。

e.g。

<强> HTML

<select ng-options="font for font in reportFontload"
        ng-model="selected"
        options-attribute="reportFontload"
        options-attribute-transform="{ 'style': 'font-family: ' + $data }">
</select>

或另一种方法是提供函数回调

<强> JAVASCRIPT

$scope.transform = function(fontFamily) {
  return { 'style': 'font-family ' + fontFamily };
};

<强> HTML

<select ng-options="font for font in reportFontload"
        ng-model="selected"
        options-attribute="reportFontload"
        options-attribute-transform="transform($data)">
</select>

限制

该指令仅限于排除对象的数组，尽管有一种方法可以调整当前指令以使用对象，但是当前的实现已足以解决OP的问题。

<强>更新

我调整了上面的指令以使用对象集合，用法仍然是相同的：

<强> DEMO

(function(ng) {

    'use strict';

    var app = ng.module('options.attribute', []);

    app.directive('optionsAttribute', function($parse) {
        return {
            restrict: 'A',
            compile: function(tElem, tAttr) {

                var transform = $parse(tAttr.optionsAttributeTransform);

                return function(scope, elem, attr) {

                    scope.$watch(attr.optionsAttribute, function(collection) {

                        var options = elem.children();

                        collection = new Collection(collection);

                        options = Array.prototype.slice.call(options, options.length - collection.getLength());

                        ng.forEach(options, function(option, index) {

                            var newAttributes = transform(scope, {
                                $data: collection.getItem(index),
                                $label: option.innerHTML,
                                $index: collection.getIndex(index)
                            });

                            var optionElement = angular.element(option);

                            ng.forEach(newAttributes, function(value, attribute) {

                                optionElement.attr(attribute, value);

                            });

                        });

                    }, true);

                };

            }
        };
    });

    function Collection(collection) {

        var self = this;
        var indexes;

        if(angular.isObject(collection)) {

            if(Object.keys) {
                indexes = Object.keys(collection);
            } else {
                ng.forEach(collection, function(item, index) {
                    indexes.push(index);
                });
            }

            self.getItem = function(index) {
                return collection[indexes[index]];
            };

            self.getLength = function() {
                return indexes.length;
            };

            self.getIndex = function(index) {
                return indexes[index];
            };

        } else if(angular.isArray(collection)) {

            self.getItem = function(index) {
                return collection[index];
            };

            self.getLength = function() {
                return collection.length;
            };

            self.getIndex = function(index) {
                return index;
            };

        }

    }


})(angular);

Answer 2

您无法创建其选项具有不同字体的选择（组合框）。据我所知，HTML和CSS中不允许这样做。

但是如果你使用不同的commbo，你可以实现这个：Bootstrap或其他一些。

这是一个纯HTML的bootstrap示例。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li style="font-family:Arial"><a href="#">Action</a></li>
    <li style="font-family:Arial Blackl"><a href="#">Another action</a></li>
    <li style="font-family:Andale Mono"><a href="#">Something else here</a></li>
    <li style="font-family:Courier New"><a href="#">Separated link</a></li>
  </ul>
</div>

Plunker Here

现在以角度使用，您可以使用https://angular-ui.github.io/bootstrap/ 或者你可以为它编写自己的实现。

如何在每个选项的ng-option中应用font-family

2 个答案: