jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(selectpicker): make possible to use selectpicker with ngOptions 

Closes #18
pull/217/head
Vladimir Lugovsky 2016-04-22 21:05:41 +03:00
parent 0aa3a38ceb
commit c424ead837
3 changed files with 176 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js Normal file
View File

@ -0,0 +1,38 @@
/**
* @author v.lugovsky
* created on 22.04.2016
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.form')
.controller('SelectpickerPanelCtrl', SelectpickerPanelCtrl);
/** @ngInject */
function SelectpickerPanelCtrl() {
var vm = this;
vm.standardSelectItems = [
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
{ label: 'Option 3', value: 3 },
{ label: 'Option 4', value: 4 },
];
vm.selectWithSearchItems = [
{ label: 'Hot Dog, Fries and a Soda', value: 1 },
{ label: 'Burger, Shake and a Smile', value: 2 },
{ label: 'Sugar, Spice and all things nice', value: 3 },
{ label: 'Baby Back Ribs', value: 4 },
];
vm.groupedSelectItems = [
{ label: 'Group 1 - Option 1', value: 1, group: 'Group 1' },
{ label: 'Group 2 - Option 2', value: 2, group: 'Group 2' },
{ label: 'Group 1 - Option 3', value: 3, group: 'Group 1' },
{ label: 'Group 2 - Option 4', value: 4, group: 'Group 2' },
];
}
})();

68
src/app/pages/form/inputs/widgets/select/select.html
View File

@ -1,47 +1,38 @@
<div class="form-group"> <div ng-controller="SelectpickerPanelCtrl as selectpickerVm">
<select class="form-control selectpicker" title="Standard Select" selectpicker> <div class="form-group">
<option>Option 1</option> <select class="form-control selectpicker" selectpicker title="Standard Select"
<option>Option 2</option> ng-model="selectpickerVm.standardSelected"
<option>Option 3</option> ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
<option>Option 4</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search" selectpicker> <select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search" selectpicker
<option>Hot Dog, Fries and a Soda</option> ng-model="selectpickerVm.searchSelectedItem"
<option>Burger, Shake and a Smile</option> ng-options="item as item.label for item in selectpickerVm.selectWithSearchItems">
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<select class="form-control selectpicker" title="Option Types" selectpicker> <select class="form-control selectpicker" title="Option Types" selectpicker>
<option>Standard option</option> <option>Standard option</option>
<option data-subtext="option subtext">Option with subtext</option> <option data-subtext="option subtext">Option with subtext</option>
<option disabled>Disabled Option</option> <option disabled>Disabled Option</option>
<option data-icon="glyphicon-heart">Option with cion</option> <option data-icon="glyphicon-heart">Option with cion</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<select class="form-control selectpicker" disabled title="Disabled Select" selectpicker> <select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
</select> </select>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<select class="form-control" title="Select with Option Groups" selectpicker> <select class="form-control" title="Select with Option Groups" selectpicker
<optgroup label="Group 1"> ng-model="selectpickerVm.groupedSelectedItem"
<option>Group 1 - Option 1</option> ng-options="item as item.label group by item.group for item in selectpickerVm.groupedSelectItems">
<option>Group 1 - Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Group 2 - Option 1</option>
<option>Group 2 - Option 2</option>
</optgroup>
</select> </select>
</div> </div>
</div> </div>
@ -56,24 +47,28 @@
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<select class="form-control" title="Multiple Select" multiple selectpicker> <select class="form-control" title="Multiple Select" multiple selectpicker
ng-model="selectpickerVm.multipleSelectedItems"
ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker> <select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker
ng-model="selectpickerVm.multipleSelectedItems2"
ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
</select> </select>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker> <select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker>
@ -128,4 +123,5 @@
</select> </select>
</div> </div>
</div> </div>
</div>
</div> </div>

25
src/app/pages/form/inputs/widgets/select/selectpicker.directive.js
View File

@ -12,10 +12,27 @@
function selectpicker() { function selectpicker() {
return { return {
restrict: 'A', restrict: 'A',
link: function( $scope, elem) { require: '?ngOptions',
setTimeout(function() { priority: 1500, // make priority bigger than ngOptions and ngRepeat
elem.selectpicker({dropupAuto: false}); link: {
}, 0); pre: function(scope, elem, attrs) {
elem.append('<option data-hidden="true" disabled value="">' + (attrs.title || 'Select something') + '</option>')
},
post: function(scope, elem, attrs) {
function refresh() {
elem.selectpicker('refresh');
}
if (attrs.ngModel) {
scope.$watch(attrs.ngModel, refresh);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refresh);
}
elem.selectpicker({ dropupAuto: false, hideDisabled: true });
}
} }
}; };
} }