本文介绍了如何在 ng-option 中为每个选项应用 font-family的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想显示一个所有选项字体都不同的组合框.

I want to show a combobox whose all option font will be different.

在 AngluarJS 中使用 ng-options 指令填充 标签的选项时,我不知道如何设置字体系列每个选项.

When using the ng-options directive in AngluarJS to fill in the options for a <select> tag I cannot figure out how to set the font-family for each option.

$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 中的每个选项.

For ng-repeat if i use to apply style="font-family:{{font}}". It works for each and every option in the 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>

我需要知道,为什么字体系列在 ng-option 中不起作用.指导我任何可能的答案.

I need to know , Why font-family is not works in ng-option. Guide me any possible answer.

推荐答案

我创建了一个 optionsAttribute 指令,可以在 ngOptions 呈现后转换选项标签的属性代码>.

I have created an optionsAttribute directive that can transform the attributes of your option tags after they are rendered by ngOptions.

演示

指令

.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);
              });
            }

          });

        });
      };
    }
  };
});

使用

  1. 提供您在 optionsAttribute 指令中的 ngOptions 指令中提供的数组值.
  1. Provide the array value you have provided in the ngOptions directive in the optionsAttribute directive.

例如

<select ng-options="font for font in reportFontload"
        options-attribute="reportFontload">
</select>
  1. optionsAttributeTransform 指令中添加一个回调,该指令返回一个 json 对象,该对象表示要附加到每个 option 标记中的属性.回调本身提供了 2 个值:
  1. Add a callback in the optionsAttributeTransform directive that returns an json object that represents the attributes to be appended in each of the options tag. The callback itself is provided with 2 values:

$data - 代表 #1 中提供的数组中的每个项目.

$data - represents each of the item in the array provided in #1.

$index - 表示 $data 的索引.

$index - represents the index of the $data.

例如

HTML

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

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

or an alternative is to provide a function callback

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 的问题.

The directive is only limited towards array, objects excluded, although there is a way to tweak the current directive to also work with objects, but the current implementation is already sufficient for the OP's problem.

更新

我调整了上面的指令来处理对象集合,用法还是一样的:

I tweaked the directive above to also work with object collections, the usage still says the same:

演示

(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);

这篇关于如何在 ng-option 中为每个选项应用 font-family的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 06:17
查看更多