如何在 ng-option 中为每个选项应用 font-family [英] How to apply font-family in ng-option for each option
问题描述
我想显示一个所有选项字体都不同的组合框.
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);
});
}
});
});
};
}
};
});
使用
- 提供您在
optionsAttribute指令中的ngOptions指令中提供的数组值.
- Provide the array value you have provided in the
ngOptionsdirective in theoptionsAttributedirective.
例如
<select ng-options="font for font in reportFontload"
options-attribute="reportFontload">
</select>
- 在
optionsAttributeTransform指令中添加一个回调，该指令返回一个 json 对象，该对象表示要附加到每个option标记中的属性.回调本身提供了 2 个值:
- Add a callback in the
optionsAttributeTransformdirective that returns an json object that represents the attributes to be appended in each of theoptions 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
