Skip to content

Commit

Permalink
fix(selectpicker): make possible to use selectpicker with ngOptions
Browse files Browse the repository at this point in the history 
Closes akveo#18
  • Loading branch information
@lugovsky
lugovsky committed Apr 29, 2016
1 parent 0aa3a38 commit c424ead
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 121 deletions.
38 changes: 38 additions & 0 deletions src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js
View file
Original file line number Diff line number Diff line change
@@ -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' },
];

}

})();
230 changes: 113 additions & 117 deletions src/app/pages/form/inputs/widgets/select/select.html
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,127 @@
<div class="form-group">
<select class="form-control selectpicker" title="Standard Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search" selectpicker>
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker" title="Option Types" selectpicker>
<option>Standard option</option>
<option data-subtext="option subtext">Option with subtext</option>
<option disabled>Disabled Option</option>
<option data-icon="glyphicon-heart">Option with cion</option>
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div ng-controller="SelectpickerPanelCtrl as selectpickerVm">
<div class="form-group">
<select class="form-control selectpicker" selectpicker title="Standard Select"
ng-model="selectpickerVm.standardSelected"
ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search" selectpicker
ng-model="selectpickerVm.searchSelectedItem"
ng-options="item as item.label for item in selectpickerVm.selectWithSearchItems">
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker" title="Option Types" selectpicker>
<option>Standard option</option>
<option data-subtext="option subtext">Option with subtext</option>
<option disabled>Disabled Option</option>
<option data-icon="glyphicon-heart">Option with cion</option>
</select>
</div>
<div class="form-group">
<select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>

<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Option Groups" selectpicker>
<optgroup label="Group 1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Option Groups" selectpicker
ng-model="selectpickerVm.groupedSelectedItem"
ng-options="item as item.label group by item.group for item in selectpickerVm.groupedSelectItems">
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Divider" selectpicker>
<option>Group 1 - Option 1</option>
<option>Group 1 - Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option data-divider="true"></option>
<option>Group 2 - Option 1</option>
<option>Group 2 - Option 2</option>
</optgroup>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Select with Divider" selectpicker>
<option>Group 1 - Option 1</option>
<option>Group 1 - Option 2</option>
<option data-divider="true"></option>
<option>Group 2 - Option 1</option>
<option>Group 2 - Option 2</option>
</select>
</select>
</div>
</div>
</div>
</div>

<div class="form-group">
<select class="form-control" title="Multiple Select" multiple selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>

<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Success Select" data-style="btn-success" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Warning Select" data-style="btn-warning" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<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 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group">
<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 2</option>
<option>Option 3</option>
</select>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Info Select" data-style="btn-info" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>

<div class="form-group">
<select class="form-control" title="Danger Select" data-style="btn-danger" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Success Select" data-style="btn-success" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<select class="form-control" title="Warning Select" data-style="btn-warning" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" title="Info Select" data-style="btn-info" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>

<div class="form-group">
<select class="form-control" title="Inverse Select" data-style="btn-inverse" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<div class="form-group">
<select class="form-control" title="Danger Select" data-style="btn-danger" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>

<div class="form-group">
<select class="form-control" title="Inverse Select" data-style="btn-inverse" data-container="body" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</div>
</div>
</div>
25 changes: 21 additions & 4 deletions src/app/pages/form/inputs/widgets/select/selectpicker.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,27 @@
function selectpicker() {
return {
restrict: 'A',
link: function( $scope, elem) {
setTimeout(function() {
elem.selectpicker({dropupAuto: false});
}, 0);
require: '?ngOptions',
priority: 1500, // make priority bigger than ngOptions and ngRepeat
link: {
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 });
}
}
};
}
Expand Down

0 comments on commit c424ead

Please sign in to comment.