Selected item: {{ctrl.selectedItem | 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.options = [ {id: 1, text: '11111'}, {id: 2, text: '22222'}, {id: 3, text: '33333'} ]; ctrl.rerender = () => { ctrl.selectedItem = ctrl.options[2]; }; ctrl.selectedItem = ctrl.options[1]; });
tab 1
Tab 2
import angular from 'angular'; import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng'; import 'angular-route'; import TabsNG from '@jetbrains/ring-ui/components/tabs-ng/tabs-ng'; angular.module('test', [SelectNG, TabsNG]). controller('testCtrl', function () { var ctrl = this; ctrl.options = [ {id: 1, text: '11111'}, {id: 2, text: '22222'}, {id: 3, text: '33333'} ]; ctrl.selectConfig = {}; ctrl.selectedItem = ctrl.options[1]; });
Selected item: {{ctrl.selectedItem | 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.options = [ {id: 1, text: '11111'}, {id: 2, text: '22222'}, {id: 3, text: '33333'} ]; ctrl.selectedItem = ctrl.options[1]; });
Selected item: {{ctrl.selectedItem}}
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.options = [ {id: 1, text: '11111'}, {id: 2, text: '22222'}, {id: 3, text: '33333'} ]; ctrl.selectedItem = ctrl.options[1]; });

Be carefully using lazy=false may significantly decrease your performance

This case describe when we take from server ng-model and then asynchronous take options for this model

Selected item: {{ctrl.selectedItem}}
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.selectedItem = 2 $timeout(function () { ctrl.options = [ {id: 1, text: '11111'}, {id: 2, text: '22222'}, {id: 3, text: '33333'} ]; }, 1000); });

Getting items from promise on click with external filtering. (Filter value should be equal to label, not just part)

Selected item: {{ctrl.selectedItem | json}}
import angular from 'angular'; import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng'; angular.module('test', [SelectNG]). controller('testCtrl', function ($timeout, $q) { var ctrl = this; ctrl.options = [ {key: 1, label: '1'}, {key: 2, label: '2'}, {key: 3, label: '3'}, {key: 4, label: '4'}, {key: 5, label: '5'} ]; ctrl.selectedItem = ctrl.options[1]; ctrl.getItems = function (query) { var defer = $q.defer(); $timeout(function () { defer.resolve(ctrl.options.filter(function (op) { return query ? op.label === query : true; })); }, 1000 * Math.random()); return defer.promise; }; });

Select-ng as dropdown

  1. {{click.label}}
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); });

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 = [ {key: 1, label: '11111'}, {key: 2, label: '22222'}, {key: 3, label: '33333'}, {key: 4, label: '4444444'}, {key: 5, label: '5555'} ]; ctrl.selectedItems = [ctrl.options[1], ctrl.options[2]]; });

Form with validation

Error {{testForm.requiredSelect.$error}}
Errors: {{testForm.$error}}
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})) });