标签: ui-select2

我正在使用Oleg的select2演示,但我想知道是否可以在下拉菜单中更改当前选择的值.

例如,如果加载的四个值是:"Any", "Fruit", "Vegetable", "Meat"并且下拉列表默认为"Any",我怎么能"Fruit"在JqGrid事件中将其更改为loadComplete？

这可能吗？

我正在使用select2控件,通过ajax 加载数据.这需要使用<input type=hidden..>标签.

现在,我想检索选定的文本.(表达式中的value属性仅为data-bindsotres id)

我试过了$(".select2-chosen").text(),但是当我在页面上有多个select2控件时,这会中断.

我正在努力实现一些非常简单的事情:

<ui-select multiple ng-model="company.stack" theme="bootstrap">
    <ui-select-match>{$$item.name$}</ui-select-match>
    <ui-select-choices repeat="technology in technologies | filter: $select.search">
        <div ng-bind-html="technology.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

更改对象时,更改不会反映在model.stack模型中.我尝试将其更改为$ parent.company.stack,但它仍然无法正常工作.我错过了什么？我正在使用AngularJS v1.3.0-beta.17.

我使用角度ui-select下拉.如何为下拉值设置默认值？

<h3>Selectize theme</h3>
  <p>Selected: {{country.selected}}</p>
  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

该片段来自plnkr.co.目前下拉菜单只播放默认Select or search a country in the list...但我需要从控制器传递一个值.让我们说$scope.default = {"name":"Decard"}

谢谢!!

编辑

这个问题与此类似,但涉及json返回格式的数据.

我注意到Angular-UI已经停止了他们的UI-Select2指令,转而支持新的UI-Select(有多个主题 - select2,bootstrap,selectize).

它看起来像这样:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

<p>Selected: {{multipleDemo.colors}}</p>

最初我的选择框应该是空的但是准备好接受类型字符,即至少4个字符的字符串,然后进行API调用以检索要填充框的建议值列表.然后将选择一个值,并且应该根据需要重复搜索.

首先,我尝试$watch了ng-model在这种情况下multipleDemo.colors(在演示中使用此示例).API调用从未发生,然后我意识到了原因.实际模型根本不会更改,因为它只会在进行选择时更改(我的选择框为空,因此无法选择任何内容).

我的结论是,我应该(能够)$watch添加什么作为过滤器,即filter: $select.search.

有谁知道我应该如何在我的控制器中使用那个？

这个:

$scope.$watch('$select.search', function(newVal){
    alert(newVal);
});

不起作用.

编辑:对于任何人的参考,请参阅这个简短的讨论:是否可以添加对自定义查询功能的支持,如select2？

编辑2:

我通过$emit在指令中使用来解决这个问题,所以现在我的控制器中的值可用.但是现在我想知道如何覆盖指令的这一部分,以便指令本身可以保持原样,以便在将来的更新中不会中断？

我正在尝试使用数据集为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>

我有一个带有 bootstrap 的 Angular 5 项目。在我的一个 html 组件中，我有一个选择框。当我单击它时，会显示一个下拉项目列表，我可以选择一个。但是我希望用户输入一些字符串，以便可以缩小下拉项目的范围。这是我当前的代码片段，知道如何将选择框转换为可编辑的选择框。

   <select formControlName="contactList" [compareWith]="compareResource">
      <option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
      <option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
    </select>

我想将现有的选择框代码转换为可编辑的选择框。请分享您对此的想法。我对 UI 编程非常陌生。谢谢

我有一个使用Angular UI的select2元素的部分http://angular-ui.github.io/

我遇到的问题是该元素是必需的,虽然我已成功通过以下代码设置字段,但由于外部更改而不确定Angular的模型不能更新,因此不会删除所需的属性,我不知道如何要么提供$ scope.apply(),要么使用Angular的另一个函数来继续测试.

首先允许运行直接jQuery函数:(取自如何从Angular e2e测试范围执行jQuery？)

angular.scenario.dsl('jQueryFunction', function() {
return function(selector, functionName /*, args */) {
    var args = Array.prototype.slice.call(arguments, 2);
    return this.addFutureAction(functionName, function($window, $document, done) {
        var $ = $window.$; // jQuery inside the iframe
        var elem = $(selector);
        if (!elem.length) {
            return done('Selector ' + selector + ' did not match any elements.');
        }
        done(null, elem[functionName].apply(elem, args));
    });
};
});

然后更改字段值:

jQueryFunction('#s2id_autogen1', 'select2', 'open');
    jQueryFunction('#s2id_autogen1', 'select2', "val", "US");
    jQueryFunction('#s2id_autogen1', 'select2', 'data', {id: "US", text: "United …

我正在尝试将select2加载项用作具有自动完成功能的更多文本框(与下拉列表相比).这意味着如果用户键入了不在列表中的内容,我希望此自定义值保留为表单的值.

我搜索了stackoverflow并找到了以下内容:

禁用"找不到匹配项"文本并在select2上自动完成

选择2,当没有选项匹配时,应出现"其他"

他们都没有保持"自定义"价值.

我正在使用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: …