Question

我目前在select上有以下指令。

ng-options="option.value as option.title for option in exportTypes"

$ scope.exportTypes =一个对象数组，每个对象都有title，value和generatesFile属性。我希望将generatesFile属性添加为为此选择生成的每个data-generates-file的{{1}}属性。

关于如何做到这一点的任何想法？

Answer 1

以下是一个指令，可用于在ng-options与<select>一起使用时添加自定义属性，因此您可以阻止使用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>

注意：这是optionsDisabled目录here

的修改版本

Answer 2

也许有人会纠正我，但我很确定你不会从ng-options中获得这种控制权。当你使用它时，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>

编辑：

当然，这假设您确实需要那个属性。如果您只需要在select上访问该属性，那么这就是ng-options闪耀的地方。只需从选择中删除option.value as位，然后在进行选择时从阵列中取回整个对象。

http://plnkr.co/edit/6XPaficTbbzozSQqo6uE?p=preview

您可以在该演示中看到所选项目是整个对象，其中包含someAttr属性，该属性从未在选择中使用过。如果您检查DOM，您将无法看到它。 Angular在幕后跟踪所有这些。

Answer 3

或者更简单的解决方案：

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

AngularJS ng-options自定义属性

3 个答案:

编辑：