标签: angularjs-select2

我有以下Select2配置.

$scope.select2Options = {
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            text : item.description
                        };
                    }
            )};
        }
    }
};

这允许我正确填充select2控件.

发送到服务器的JSON数组包含两个名为属性的对象:然而,当我要张贴包含标签(其中包括)整体形式使用Ajax时出现的问题id和text而服务器将需要id和description.

从我的json看到片段:

"languages":[{"id":46,"text":"Français"},{"id":1,"text":"Anglais"}]

select2是否允许将其名称更改为其他名称text …

如何在angular-ui选择中清除所选值.我想要这样的东西

我一直试图找到一个如何将Select2集成到角度2组件中的演示/示例.

我的最终目标是使用select 2 ajax功能填充下拉列表,因为我开始在选择框中键入https://select2.github.io/examples.html#data-ajax

到目前为止,我的谷歌忍者权力让我失望:(

select2集成失败的例子......还有其他建议吗？

我正在尝试使用数据集为5,000的select2.

交互很慢,尤其是搜索.我需要在不久的将来处理> 500,000的数据集.

有关如何提高效率的任何建议？

我没有使用bootstrap typeahead的性能问题,虽然已经授权,但功能和显示元素较少.我也不知道搜索功能如何与typeahead一起使用.

这是plunker示例,与select2的演示相同,但​​有5,000行数据 http://plnkr.co/edit/RyCTTloW6xp81WvoCzkf?p=preview

<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>

我已经完成了它的css代码,但无法找到它在主元素上应用的实际属性.

我正在对select2库进行一些更改,以便我可以按照自己的方式使用它.我被困在它的CSS中没有得到活动或焦点元素上显示的属性边框.

没有发现任何:active selector的css或我也检查了它在js文件中也没有出现,而不是调试应用显示该元素上的任何CSS.

链接为plunkr

元素边界的图像.

我最近从1.1.4升级到1.2.9,并抓住了最新的ui-select2指令和最新的select2组件.标签模式下的select2s已停止工作.选项列表和预先输入工作,但当我从中选择任何内容时,新标记显示为没有任何值的空白内容,并对其进行调试,我看到它正在从{text:"foo",id:10}切片低至10 - 对象正在被id替换.我真的很感激有关为什么会发生这种情况的任何见解.

演示:http://plnkr.co/edit/RepMSFQsIPDuPTNFWKUN？p = preview

这是我的select2选项:

.controller('AppController', function($scope) {
  availableTags = [
    {text: 'Apple', id: 1},
    {text: 'Apricot', id: 2},
    {text: 'Avocado', id: 3},
  ];
  $scope.select2Options = {
    tags: availableTags,
    multiple: true, 
    minimumInputLength: 1,
    formatResult: function (item) {
        return item.text;
    },
    formatSelection: function (item) {
        return item.text;
    },
  }

我正在使用UI-Select 0.8.4并拥有大量数据集.然后我使用UI-Select在数据集旁边的下拉列表中显示属性值.我正在使用它来过滤器.因此,从下拉列表中选择时,将过滤结果.

每次当我将鼠标悬停在下拉列表中的某个项目上时,它始终会触发ng-repeat过滤器.

这是滞后于我的应用程序,因为我正在使用ng-repeat中的大集合.

为什么是这样？

GIF:http: //i.imgur.com/cStlXzy.gif

Plunker (打开控制台并亲眼看看):http: //plnkr.co/edit/OxiutZ8t4IX1bOxiOTgo？p = preview

HTML:

<h3>Age list</h3>
  <p>Selected: {{age.selected}}</p>
  <ui-select ng-model="age.selected" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select a person">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="age in ageArray | filter: $select.search">
      <div ng-bind="age | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

JavaScript的:

$scope.theFilter = function(item) {
    console.log(item);
    return item;
  };

  $scope.ageArray = [];
  $scope.$watch('people', function(item) {
    for(var i = 0; i < item.length; i++) {
      $scope.ageArray.push(item[i].age);
    }
  });

  $scope.people = [
    { name: 'Adam',      email: …

我有一个简单的select2 init,我希望在默认情况下禁用它而不用后续链接.select2("enable", false).

HTML:

<input type='hidden' value="192" data-init-text='Bla bla' name="input" id="test" style="width:300px;" />

JS:

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 3,
        placeholder: "Search",
        enable: "false", // I want this to be working!
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    types: ["exercise"],
                    limit: -1,
                    term: term
                };
            },
            results: function(data, page ) {
                return { results: data.results.exercise }
            }
        },
        formatResult: function(exercise) { 
            return "<div class='select2-user-result'>" + exercise.term + "</div>"; …

有问题的人使用angular-ui-select？

得到这个错误

GET http://localhost/select2/select.tpl.html 404 (Not Found) angular.js:8539
Error: [$compile:tpload] Failed to load template: select2/select.tpl.html

从文档中 - 我只需要引用select.js和select.css

我正在尝试使用带有Angularjs(1.5)的jQuery(2.2.1)Select2(3.5.2),但是很难从选择框中获取数据.我已经尝试了ui-select,我可以检索数据......但是在搜索时经常会崩溃浏览器,速度非常慢且整体不稳定(5000-10000项).即使有大量的条目,jQuery Select2也是快速且响应迅速的,但是当我选择一个选项时,我似乎无法获得该对象.

<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/CustomScripts/app.js"></script>
    <script src="~/Scripts/jquery-2.2.1.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".sel").select2();
        });
    </script>
<head>
<body ng-app="app" ng-controller="MainCtrl">
    <select class="sel" data-ng-model="country.selected" ng-options="country.Name for country in countries | orderBy: 'Name'">
<body>

app.js

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.country = {};

    $scope.countries = [{
        name: 'Australia',
    }, {
        name: 'United States'
    }, {
        name: 'United Kingdom'
    }];

}]);

有没有办法让这两个很好地工作？