bim-select
Version:
A dropdown/select solution for Angular.js that handles millions of items without lag.
198 lines (163 loc) • 6.88 kB
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Example of bim-select using bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/FortAwesome/Font-Awesome/945e8bbd/css/font-awesome.css">
<style>
body {
padding-bottom: 200px;
}
</style>
</head>
<body ng-controller="ExampleController as vm">
<div class="container">
<h1>Examples</h1>
<h2>Handle many items</h2>
<bim-select items="vm.long" ng-model="vm.longItem"></bim-select>
<p>Selected value: <span ng-bind="vm.longItem | json"></span></p>
<h2>Disabled state</h2>
<bim-select items="vm.countries"
adapter="vm.countryAdapter"
ng-model="vm.countryValue"
ng-disabled="vm.disabled"></bim-select>
<input type="checkbox" id="dis" ng-model="vm.disabled">
<label for="dis">Simulate disabled state</label>
<h2>Item template</h2>
<bim-select items="vm.countries"
item-template-url="'/bim-select-item.template.html'"
adapter="vm.countryAdapter"
ng-model="vm.countryItemTemplateValue"
></bim-select>
<h2>Selected Item template</h2>
<bim-select items="vm.countries"
item-template-url="'/bim-select-item.template.html'"
selected-item-template-url="'/bim-select-selected-item.template.html'"
adapter="vm.countryAdapter"
ng-model="vm.countrySelectedItemTemplateValue"
></bim-select>
<h2>Using null value</h2>
<bim-select items="vm.names"
ng-model="vm.nameValue"
adapter="vm.nameAdapter"></bim-select>
<p>Selected value: <span ng-bind="vm.nameValue | json"></span></p>
<h2>Having no items</h2>
<bim-select items="vm.empty" ng-model="vm.emptyValue"></bim-select>
<p>Selected value: <span ng-bind="vm.emptyValue | json"></span></p>
<h2>Custom placeholder</h2>
<bim-select items="vm.countries"
ng-model="vm.placeholderValue"
placeholder="Select a country…"
adapter="vm.countryAdapter"></bim-select>
<p>Selected value: <span ng-bind="vm.placeholderValue | json"></span></p>
<h2>Custom sorter</h2>
<bim-select items="vm.countries"
ng-model="vm.sortedValue"
adapter="vm.countryAdapter"
sorter="vm.reverseCountrySorter"></bim-select>
<p>Selected value: <span ng-bind="vm.sortedValue | json"></span></p>
<h2>Selected item validation</h2>
<h6>Role (Editors cannot publish)</h6>
<form name="vm.statusForm">
<bim-select items="vm.roles"
ng-model="vm.roleValue"
></bim-select>
<h6>Status</h6>
<bim-select items="vm.statuses"
validator="vm.validator"
ng-model="vm.statusValue"
name="status"
ng-class="{
'has-error': vm.statusForm.status.$invalid
}"
></bim-select>
</form>
<h2> Disabling items </h2>
<bim-select items="vm.dItems" ng-model="vm.dIValues"></bim-select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/kamilkp/angular-vs-repeat/v1.1.7/src/angular-vs-repeat.min.js"></script>
<script src="../dist/bim-select.js"></script>
<script>
angular
.module('app', ['bim.select'])
.controller('ExampleController', function() {
const vm = this;
// COUNTRIES
this.countries = [
{ name: 'Denmark', code: 'dk', prefixCode: true },
{ name: 'Sweden', code: 'sv', prefixCode: false },
{ name: 'Finland', code: 'fi', prefixCode: false},
{ name: 'Norway', code: 'no', prefixCode: true},
];
this.countryValue = this.countries[1];
this.countryItemTemplateValue = this.countries[3];
this.countrySelectedItemTemplateValue = this.countries[3];
this.countryAdapter = function(item) {
return {
text: item.name,
id: item.code
}
}
this.reverseCountrySorter = function reverse(a, b, query) {
var result = a.name.localeCompare(b.name, {
sensitivity: 'base'
});
// reverse order when searching list...
return query ? -result : result;
}
// Roles
this.roles = [
{ text: 'Admin', id: 1 },
{ text: 'Editor', id: 2}
];
this.roleValue = this.roles[1];
// Statuses
this.statuses = [
{ text: 'Publish', id: 1 },
{ text: 'Unpublish', id: 2},
{ text: 'Archive', id: 3}
];
this.statusValue = this.statuses[1];
this.validator = function(item) {
if (item) {
if (item.model.text === 'Publish') {
if (vm.roleValue.text !== 'Admin') {
return false;
}
}
}
return true;
}
// NAMES
this.names = [
{ id: null, text: 'Empty' },
{ id: 1, text: 'Name 1' },
{ id: 2, text: 'Name 2' }
];
this.nameValue = null;
this.nameAdapter = function(item) {
return {
id: String(item.id),
text: item.text
};
}
// LONG LIST
this.long = [];
for (var i=1;i<=10000;i++) {
this.long.push({ id: i, text: 'Item ' + i });
}
// DISABLED ELEMENTS
this.dItems = [
{ id: 1, text: 'Published', isDisabled: true },
{ id: 2, text: 'Unpublished', isDisabled: false },
{ id: 3, text: 'Archived' }
]
// this.dIValue = this.dItems[1];
})
</script>
</body>
</html>