Инструменты пользователя

Инструменты сайта


angular:angularjs:storonnie_moduli:ui.select2:ustanovka

Установка

Зависимости

  • Angular >=1.2.18
  • ngSanitize module
  • jQuery ( optional for older browser support )
  • Bootstrap (v3)/Select2/Selectize CSS as appropriate

Совместимость браузера начиная с Internet Explorer 8 и Firefox 3.6.

Устанавливать

Есть несколько способов добавить необходимые файлы:

  1. Склонировать и подключить файлы
  2. Ссылка на CDN
  3. Установить через Bower и подключить файлы bower install angular-ui-select

расположение скриптов

  • bower_components/angular-ui-select/dist/select.js
  • bower_components/angular-ui-select/dist/select.css

Для поддержки IE8 / FF3.6 необходимо подключить:

  <!--
    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
  -->
  <!--[if lt IE 9]>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
    <script>
      document.createElement('ui-select');
      document.createElement('ui-select-match');
      document.createElement('ui-select-choices');
    </script>
  <![endif]-->

Для RequireJS ваша установка может выглядеть так:

require.config({
    paths: {
        'angular': 'bower_components/angular/angular',
        'angular-ui-select': 'bower_components/angular-ui-select/dist/select'
    },
    shim: {
        'angular-ui-select': ['angular']
    }
});

Включите в свое приложение модули ui.select и ngSanitize

var module = angular.module('myapp', ['ui.select', 'ngSanitize']);

Базовый пример

Основное использование директивы в html

<ui-select ng-model="selected.value">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

С соответствующим angular controller:

angular.module('app')
.controller('ctrl', ['$scope', function ($scope){
    $scope.itemArray = [
        {id: 1, name: 'first'},
        {id: 2, name: 'second'},
        {id: 3, name: 'third'},
        {id: 4, name: 'fourth'},
        {id: 5, name: 'fifth'},
    ];
 
    $scope.selected = { value: $scope.itemArray[0] };
}]);
В зависимости от того, какая тема используется, требуется включение дополнительных таблиц стилей, чтобы в раскрывающемся списке отображался пользовательский интерфейс
angular/angularjs/storonnie_moduli/ui.select2/ustanovka.txt · Последние изменения: 2023/01/12 12:18 (внешнее изменение)