AngularJS ng-options custom attribute

Question

I currently have the following directive for mine select.

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

$ scope.exportTypes = an array of objects, each of which has attributes title, valueand generatesFile. I would like to add an attribute generatesFileas an attribute data-generates-filefor each <option>that is generated for this selection.

Any thoughts on how to do this?

Answer 1

Here is a directive that can be used to add custom attributes when used ng-optionswith <select>, so you can prevent the use ofng-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);
                });
            }
        };
     })

And then in your choice

<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,

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>

---

:

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