मैं एक कॉम्बोक्स दिखाना चाहता हूं जिसका सभी विकल्प फ़ॉन्ट अलग होंगे।

इसका उदाहरण यहां दिया गया है: फ़िडल

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

एनजी-दोहराने के लिए अगर मैं style="font-family:{{font}}" लागू करने के लिए उपयोग करता हूं। यह ng-repeat में प्रत्येक विकल्प के लिए काम करता है।

{{X0}} फ़ाइल को {{X1}} में लोड करने की एक विधि, बस अपने रास्ते से गुजरें। {{X2}} इसके लिए फाइल करें

<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 में फ़ॉन्ट-परिवार काम क्यों नहीं कर रहा है। किसी भी संभावित उत्तर का मार्गदर्शन करें।

2
Santhosh kesavan 27 नवम्बर 2015, 09:27

2 जवाब

सबसे बढ़िया उत्तर

मैंने ngOptions द्वारा प्रदान किए जाने के बाद आपके विकल्प टैग की विशेषताओं को परिवर्तित कर सकने वाले optionsAttribute निर्देश बनाए हैं।

{{X0}} निर्देश में एक कॉलबैक जोड़ें जो एक json ऑब्जेक्ट लौटाता है जो {{X1}} के प्रत्येक टैग में जोड़े जाने वाले गुणों का प्रतिनिधित्व करता है। कॉलबैक स्वयं 2 मानों के साथ प्रदान किया गया है:

निर्देशक

.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. आपके द्वारा ngOptions निर्देश में दिए गए सरणी मान को optionsAttribute निर्देश में प्रदान करें।

जैसे

<select ng-options="font for font in reportFontload"
        options-attribute="reportFontload">
</select>
  1. optionsAttributeTransform निर्देश में एक कॉलबैक जोड़ें जो एक json ऑब्जेक्ट लौटाता है जो option के प्रत्येक टैग में जोड़े जाने वाले गुणों का प्रतिनिधित्व करता है। कॉलबैक स्वयं 2 मानों के साथ प्रदान किया गया है:

$ डेटा - # 1 में दिए गए सरणी में प्रत्येक आइटम का प्रतिनिधित्व करता है।

$ सूचकांक - $data के सूचकांक का प्रतिनिधित्व करता है।

जैसे

एचटीएमएल

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

या एक विकल्प कॉलबैक प्रदान करना है

JavaScript

$scope.transform = function(fontFamily) {
  return { 'style': 'font-family ' + fontFamily };
};

एचटीएमएल

<select ng-options="font for font in reportFontload"
        ng-model="selected"
        options-attribute="reportFontload"
        options-attribute-transform="transform($data)">
</select>

सीमाएं

निर्देश केवल सरणी, ऑब्जेक्ट्स को छोड़कर सीमित है, हालांकि वर्तमान निर्देश को ऑब्जेक्ट के साथ काम करने के लिए ट्वीक करने का एक तरीका भी है, लेकिन ओपी की समस्या के लिए वर्तमान कार्यान्वयन पहले से ही पर्याप्त है।

अद्यतन

मैंने उपर्युक्त निर्देश को ऑब्जेक्ट संग्रह के साथ काम करने के लिए भी ट्विक किया, उपयोग अभी भी वही कहता है:

DEMO

(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);
3
ryeballar 28 नवम्बर 2015, 04:54

आप एक चयन (कॉम्बो बॉक्स) नहीं बना सकते हैं, जिसके विकल्प अलग-अलग फ़ॉन्ट होंगे। मेरे ज्ञान के अनुसार HTML और CSS में इसकी अनुमति नहीं है।

लेकिन आप इसे प्राप्त कर सकते हैं यदि आप विभिन्न कॉम्बो का उपयोग करते हैं जैसे: बूटस्ट्रैप या कुछ अन्य।

यहाँ सादे HTML के साथ एक बूटस्ट्रैप उदाहरण है।

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li style="font-family:Arial"><a href="#">Action</a></li>
    <li style="font-family:Arial Blackl"><a href="#">Another action</a></li>
    <li style="font-family:Andale Mono"><a href="#">Something else here</a></li>
    <li style="font-family:Courier New"><a href="#">Separated link</a></li>
  </ul>
</div>

प्लंकर यहां

DEMO

0
Partha Sarathi Ghosh 27 नवम्बर 2015, 06:50