AngularJs: как сделать ui-select правильно работать?

СИТУАЦИЯ:

Я делаю угловое приложение, где я должен использовать ui-select: на странице информации о пользователе в select должно быть возможно выбрать один или несколько тегов. Он почти работает, за исключением того, что у меня есть проблемы с получением и отображением ранее существовавших тегов.

КОД:

вид: 

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled">

  <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match>

  <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

    {{tag.name}}

  </ui-select-choices>

</ui-select>

<p>Selected: {{info_data.tags}}</p>

8
angularjs html javascript ui-select

2 ответов

вы не были особенно описательными с ошибками, которые вы видите, поэтому я не знаю, поможет ли следующее..

у меня была проблема изначально при использовании демонстрационного кода ui-select в качестве примера, потому что они используют propsFilter фильтр, который является пользовательским фильтром, который они написали для демо:

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

Я предполагаю, что вы не включаете этот фильтр в свой код, что может быть причиной возникновения проблемы. Вы можете решить это используя angular нормальный фильтр:

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}">

кроме того, если у вас есть несколько свойств для фильтрации, вы можете написать фильтр propsFilter для фильтрации или вместо AND. Если вы используете "фильтр" для фильтрации нескольких свойств, он попытается сопоставить значение поиска по всем свойствам.

app.filter('propsFilter', function() {
  return function(items, props) {
            var out = [];
                if (angular.isArray(items)) {
                  items.forEach(function(item) {
                        var itemMatches = false;

                        var keys = Object.keys(props);
                        for (var i = 0; i < keys.length; i++) {
                              var prop = keys[i];
                              var text = props[prop].toLowerCase();
                              if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                                    itemMatches = true;
                                    break;
                                  }
                            }

                            if (itemMatches) {
                              out.push(item);
                            }
                      });
                } else {
                  // Let the output be the input untouched
                      out = items;
                }

                return out;
          };
    });

вы можете увидеть покончить с фильтром в нем здесь: https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

хотя, если у вас есть определенные требования к фильтрации, я бы рекомендовал вам написать свой собственный фильтр для обеспечения оптимальной производительности.

34

Я не знаю, какая ситуация была до Select2#4.0, но на самом деле не так уж сложно использовать его без angular-ui-select (и это на одну зависимость меньше)

включить select2 в ваших зависимостях bower и используйте его в своем link функция в директиве:

.directive('someDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            element.find('.your-select2').select2({
                theme: 'classic',
                placeholder: 'Select a placeholder...',
                allowClear: true,
                data: [{ id: 'New', text: 'New'}]...
            });
        },
    };
})

и ваш HTML:

<select class="your-select2" ng-model="a.model.field"></select>

вы также можете загрузить data от контроллера через службу, если вы хотите, то просто используйте scope, чтобы установить его!

Я говорю это, как я пытался использовать angular-ui-select потому что я подумал: "Эй, это угловой, вы должны использовать плагин для него!", но это не всегда так :). Плюс я нашел, что документы не так полезны (назовите меня ленивым, но эй)

3