Geek Answers Handbook

Multi-dialect highlighting in Angular js with xeditable

I am using the AngularJS template in my project. That I have so many controls like a text box, a drop down menu, datepicker, etc. I want change to be multi-selective.

I am using xeditable.js from the below

http://vitalets.imtqy.com/angular-xeditable/

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

See sample html template part below

<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 Dropdown Part

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

Due to the complexity of the project, I cannot provide all the html and script code.

I just need some insight into how I can go further for the multiple-choice drop-down list option.

I am using xeditable.js in the same way as in the link above. Several attributes change the appearance of the drop-down list. I need something like having to select multiple elements and separate them with commas.

Can someone point out the direction for implementing a multi-select dropdown in AngularJS with xeditable?

+5
source share
1 answer

Add to your 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(); }); }); } }); }]);

In your form

 <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>
0
source

More articles:


All Articles