xeditable

Question

के साथ कोणीय जेएस में मल्टीइलेक्ट ड्रॉपडाउन मैं अपने प्रोजेक्ट में एंगुलरजेएस टेम्पलेट का उपयोग कर रहा हूं। इसमें टेक्स्टबॉक्स, ड्रॉपडाउन, डेटपिकर इत्यादि जैसे बहुत से नियंत्रण हैं .. मैं मंदी के रूप में ड्रोडडाउन को बदलना चाहता हूं।

मैं नीचे वाले

http://vitalets.github.io/angular-xeditable/

https://github.com/vitalets/angular-xeditable

नीचे

<div ng-controller="CriteriaCtrl" ng-cloak> 
 
    <div class="well editable-criteria span12" ng-show="hasKeys()"> 
 
    <div class="criteria-loading" ng-show="criterialoading"></div> 
 
    <ul ng-hide="criterialoading"> 
 
    <li ng-repeat="criteriaName in criteriaNames" class="{{criteriaName}}"> 
 
     <div ng-switch on="criteria[criteriaName].type"> 
 
     {{criteria[criteriaName].displayLabel}}: 
 
     <span ng-switch-when="text"> 
 
      <a href="#" editable-text="criteria[criteriaName].currentValue" 
 
       onbeforesave="updatetext($data, criteria[criteriaName].name)" 
 
       onshow="hideOtherPopups(criteriaName)"> 
 
       {{ criteria[criteriaName].currentDisplayValue || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' }} 
 
      </a> 
 
     </span> 
 
     <span ng-switch-when="dropdown"> 
 
      <a href="#" editable-select="criteria[criteriaName].currentValue.currentValue" 
 
       e-ng-options="p.currentValue as p.currentValueLabel for p in possible[criteriaName]" 
 
       onshow="hideOtherPopups(criteriaName)" 
 
       onbeforesave="updatedropdown($data, criteriaName)"> 
 
       {{criteria[criteriaName].currentValueLabel}} 
 
      </a> 
 
     </span> 
 
     <span ng-switch-when="date"> 
 
      <a href="#" editable-bsdate=" criteria[criteriaName].currentValue" 
 
       e-datepicker-popup="dd-MMMM-yyyy" onshow="makedatepicker(criteriaName)" 
 
       onbeforesave="updatedate($data, criteria[criteriaName].name)" 
 
       class="editable-date"> 
 
        {{ (criteria[criteriaName].currentValue | date:"dd/MM/yyyy") || empty }} 
 
      </a> 
 
     </span> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</div>

टेम्प्लेटेड एचटीएमएल नमूना का हिस्सा देखें से xeditable.js उपयोग कर रहा हूँ लटकती

angular.module('xeditable').directive('editableSelect', ['editableDirectiveFactory', 
 
    function (editableDirectiveFactory) { 
 
     return editableDirectiveFactory({ 
 
      directiveName: 'editableSelect', 
 
      inputTpl: '<select class="xx" multiple="multiple"></select>', 
 
      autosubmit: function() {debugger 
 
       var self = this; 
 
       self.inputEl.bind('change', function() { 
 
        self.scope.$apply(function() { 
 
         self.scope.$form.$submit(); 
 
        }); 
 
       }); 
 
      } 
 
     }); 
 
    }]);

परियोजना जटिलता के कारण

के लिए xeditable की 210

भाग, मैं पूरी एचटीएमएल और स्क्रिप्ट कोड प्रदान करने में सक्षम नहीं हूँ।

मुझे बस कुछ विचार चाहिए कि मैं बहु-चयन ड्रॉपडाउन विकल्प के लिए आगे कैसे जा सकता हूं।

मैं ऊपर दिए गए लिंक में xeditable.js का उपयोग कर रहा हूं। एकाधिक गुण ड्रॉपडाउन की उपस्थिति को संशोधित करते हैं। मुझे कुछ वस्तुओं को चुनने और अल्पविराम से अलग करने की आवश्यकता है।

क्या कोई भी AngularJS में बहु-चयन ड्रॉपडाउन को xeditable के साथ लागू करने की दिशा प्रदान कर सकता है?

Answer 1

अपने xeditable.js

angular.module('xeditable').directive('editableMultiselect', ['editableDirectiveFactory', 
    function (editableDirectiveFactory) { 
     return editableDirectiveFactory({ 
      directiveName: 'editableMultiselect', 
      inputTpl: '<select size="6" multiple></select>', 
      autosubmit: function() { 
       var self = this; 
       self.inputEl.bind('change', function() { 
        self.scope.$apply(function() { 
         self.scope.$form.$submit(); 
        }); 
       }); 
      }    
     }); 
    }]); 

में जोड़े अपने फार्म

<span editable-multiselect="user.name" e-name="name" e-ng-options="Status.ID as Status.name for Status in Users"> 
           {{user.name || 'Not Set'}} 
          </span>