Javascript AngularJS ng选项自定义属性

我当前在我的

select

上有以下指令

ng options=“option.value作为exportTypes中选项的option.title”

$scope.exportTypes=对象数组，每个对象都具有

标题

、

值

、和

生成文件

属性。我希望在为此选择生成的每个

上添加

generatesFile

属性作为

data generates file

属性

---

你有什么想法吗？

也许有人会纠正我，但我很确定你不会让这种控制脱离

ng选项。Angular在您使用此功能时为您管理“选择后台”，这在90%的时间内都很好，但在您这样的情况下可能会受到限制。我不确定您在看什么基准，但我愿意打赌选项元素上的
ng repeat
在性能上与使用
ng options
相当

我会这样说：

<select ng-model="selectedExportType">
    <option ng-repeat="exportType in exportTypes" data-generates-file="{{exportType.generatesFile}}" value="{{exportType.value}}">
        {{exportType.title}}
    </option>
</select>


{{exportType.title}


编辑：
当然，这假设您确实需要该属性。如果您只需要在select上访问该属性，那么这就是
ng options
的作用所在。只需从选择中删除
选项.value as
位，然后在进行选择时从数组中取回整个对象


在该演示中，您可以看到所选项目是整个对象，并带有
someAttr
属性，该属性在select中从未使用过。如果检查DOM，您将看不到它。Angular会在幕后跟踪所有这些信息。
这里有一个指令，当使用
ng选项
和
时，可以使用该指令添加自定义属性，因此可以防止使用
ng repeat

.directive('optionsCustomAttr', function ($parse) {
        return {
            priority: 0,
            require: 'ngModel',
            link: function (scope, iElement, iAttrs) {
                scope.addCustomAttr = function (attr, element, data, fnDisableIfTrue) {
                    $("option", element).each(function (i, e) {
                        var locals = {};
                        locals[attr] = data[i];
                        $(e).attr(iAttrs.customAttrName ? iAttrs.customAttrName : 'custom-attr', fnDisableIfTrue(scope, locals));
                    });
                };
                var expElements = iAttrs['optionsCustomAttr'].match(/(.+)\s+for\s+(.+)\s+in\s+(.+)/);
                var attrToWatch = expElements[3];
                var fnDisableIfTrue = $parse(expElements[1]);
                scope.$watch(attrToWatch, function (newValue) {
                    if (newValue)
                        scope.addCustomAttr(expElements[2], iElement, newValue, fnDisableIfTrue);
                });
            }
        };
     })

然后在你的选择中

<select ng-model="selectedExportType" ng-options="option.value as option.title for option in exportTypes" 
                  options-custom-attr="option.generatesFile for option in exportTypes" 
                  custom-attr-name="data-generates-file">
</select>



注意：这是所提到的
选项禁用
目录的修改版本
或更简单的解决方案：

<select ng-model="selectedItem" ng-options="item as item.name for item in items" option-style="items"></select>



以及在每个选项标记中插入所需内容的指令

angular.directive('optionStyle', function ($compile, $parse) {
    return {
        restrict: 'A',
        priority: 10000,
        link: function optionStylePostLink(scope, elem, attrs) {
            var allItems = scope[attrs.optionStyle];
            var options = elem.find("option");
            for (var i = 0; i < options.length; i++) {
                angular.element(options[i]).css("color", allItems[i].yourWantedValue);
            }
        }
    };
});

angular.directive（'optionStyle'，函数（$compile，$parse）{
返回{
限制：“A”，
优先权：10000，
链接：功能选项StylePostLink（范围、元素、属性）{
var allItems=范围[attrs.optionStyle]；
var期权=要素发现（“期权”）；
对于（变量i=0；i
您无法使用ng选项并创建一个选项，然后在该选项上使用ng repeat，然后您可以相应地设置属性。
ng repeat
的速度较慢，必须尽可能提高性能。如果不自己创建选项元素，我相信您将无法向它们添加自定义属性。Angular manages为您选择后台，允许您在选择选项时取回整个对象，而不仅仅是
值
属性的值等。我认为您最好的选择是对选项元素进行
ng repeat
。还有，这是如何降低性能的？不管怎样，当您执行ng选项时，它在幕后执行类似的迭代逻辑。
ng repeat
使用一个新范围，而
ng options
使用当前范围。我希望我可以使用前者，但如果不能，我想我将不得不使用你在答案中所显示的内容。另一个更有效的选项是按预期使用select，不带属性，只使用索引在对象中定位“generatesFile”，在更改时。我将尝试编辑后的建议，看看是否有效。不过，从现在的角度来看，它似乎只是一个很好的例子。考虑到我包括了一个正在运行的演示，我认为它是有效的；）即使我在使用<代码> ng init < />代码>，也不能摆脱空白的第一个选项。思想？否则这将是非常棒的！空白选项可能来源于未分配的NG模型。如果将NG模型设置为控制器中的默认值，则空白选项将被替换。请参见，您可以将基于jquery的for each循环替换为本机
angular.foreach
。添加“title”属性也可以通过使用
elem.attr
来完成。我必须做两个更改才能使其正常工作：使用
data[I-1]
导致它将第一个选项保留为不带属性，而将以下所有选项保留为错误值<代码>数据[i]
为我工作。由于指令引用了
iAttrs.customAttrName
，我不得不将
customattr name
放在HTML中，而不是
customattr
，考虑到@MichaelPlante的评论，你甚至没有测试你发布的代码是否有效。。。