import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
angular.module('test', [SelectNG]).controller('testCtrl', function () {
var ctrl = this;
ctrl.clicks = [];
ctrl.options = [
{key: 1, label: '11111'},
{key: 2, label: '22222'},
{key: 3, label: '33333'}
];
ctrl.onSelect = function (item) {
ctrl.clicks.push(item);
};
});
Text content to make scroll
import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
import DialogNG from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
function fillScrollableContent() {
let html = '
Text to scroll
';
for (var i = 0; i < 100; i++) {
html += 'Text '
}
document.getElementById('textContent').innerHTML = html;
}
fillScrollableContent();
angular.module('test', [SelectNG, DialogNG])
.run(function($templateCache) {
const tpl = `
`;
$templateCache.put('test-tpl.html', tpl);
})
.controller('testCtrl', function($timeout, dialog) {
const data = {
getOptions: () => {
return $timeout(function() {
return [
{key: 1, label: '11111'},
{key: 2, label: '22222'}
];
}, 1000);
}
}
$timeout(() =>{
dialog.show({
title: 'Select in dialog demo',
description: 'Select popup should not scroll with background page content',
data: data,
content: 'test-tpl.html'
});
}, 100);
});
import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';
angular.module('test', [SelectNG, FormNG]).
controller('testCtrl', function () {
var ctrl = this;
//It is not required to use array of strings. Just for example
ctrl.options = ['1', '22', '333', '4444'];
ctrl.selectedItem = null;
});
Load more elements on scroll
import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';
angular.module('test', [SelectNG, FormNG]).
controller('testCtrl', function ($q, $timeout) {
var ctrl = this;
var PAGE_SIZE = 20;
// Result array is increasing after each method call
ctrl.getOptions = function (skip, query) {
console.log('query = ', query, 'skip = ', skip);
var arr = [];
if (skip < 50) {
for (var i = 0; i < PAGE_SIZE; ++i) {
var labelText = (skip + '-' + i) + '';
if (query) {
labelText = query + ' ' + labelText;
}
arr.push(labelText);
}
if (skip === 0) {
arr.unshift('Unexpected option at the beginning');
}
}
var defer = $q.defer();
// Timeout is needed to demonstrate loader in rg-select
$timeout(function () {
defer.resolve(arr);
}, 1000);
return defer.promise;
};
ctrl.selectedItem = null;
});
Last render time:
| selects counts {{ctrl.selects.length || 0}}
import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
angular.module('test', [SelectNG]).
controller('testCtrl', function ($timeout) {
var ctrl = this;
ctrl.renderTime = null;
ctrl.options = [
{id: 1, text: '11111'},
{id: 2, text: '22222'},
{id: 3, text: '33333'}
];
ctrl.renderSelects = function () {
var date = Date.now();
var selectsCount = 1000;
ctrl.selects = (new Array(selectsCount)).join('x').
split('x').
map(function (id) {
return {
id: id
};
});
$timeout(function () {
ctrl.renderTime = (Date.now() - date) / 1000 + ' s';
}, 16);
};
});
Multiple select
Selected items: {{ctrl.selectedItems | json}}
import angular from 'angular';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
angular.module('test', [SelectNG]).controller('testCtrl', function () {
var ctrl = this;
ctrl.multiple = true;
ctrl.options = Array(1000).fill(null).map((it, i) => ({key: i, label: 'label-' + i}))
});