标签: ui-select

情况:

我有一个发送电子邮件的角度应用程序.有一个包含三个字段的表单:地址 - 主题 - 文本.

对于地址字段,我使用角度ui-select.

一切都运行正常,除了地址字段上的验证(主题和文本验证工作正常).

编辑:

从版本0.16.1修复此错误.正如@yishaiz所指出的那样.

因此,这个问题及其相关解决方案将ui-select版本视为<0.16.1.

代码:

HTML:

 <form name="emailForm" ng-submit="submitForm(emailForm.$valid)"> 

    <div class="row form-group">

        <label class="col-sm-2 control-label">To: </label>

        <div class="col-sm-10">

            <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

              <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.value}} &gt;</ui-select-match>

              <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search.name, value: $select.search.value, db_data_type_id: 5}">

                  <div ng-bind-html="person2.name | highlight: $select.search"></div>

                    <small>

                        email: <span ng-bind-html="''+person2.value | highlight: $select.search"></span>

                    </small>

              </ui-select-choices>

            </ui-select>

        </div>

    </div>

    <div class="col-sm-8">

         <button type="submit" class="btn btn-primary">Send</button>

    </div>

</form>

ANGULARJS:

$scope.submitForm = function(isValid) …

我在自举网格中有一个带有ui-select的表单.我希望我的ui-select与它下面的输入一样宽.这是我的代码

<div class="col-md-12">
   <div class="col-md-6 form-group">
        <label class="col-md-4" style="text-align:right;">Pays</label>
        <div class="col-md-8">
            <ui-select ng-model="adresse.pays" theme="select2" ng-disabled="disabled" ame="pays">
                <ui-select-match placeholder="Sélectionnez un pays..." allow-clear>{{$select.selected.nom}}</ui-select-match>
                <ui-select-choices repeat="pays in payss | propsFilter: {nom : $select.search}">
                    <div ng-bind-html="pays.nom | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
    <div class="col-md-6">
        <label class="col-md-4" style="text-align:right;">Mail</label>
        <input type="text" class="col-md-3 input-sm"
            ng-model="adresse.mail">
    </div>
</div>
<div class="col-md-12">
    <div class="form-group col-md-6">
        <label class="col-md-4" style="text-align:right;">Code adresse client</label>
        <input type="text" class="col-md-8 input-sm"
            ng-model="adresse.codeAdresseClient" name="codeAdresse">
    </div>
    <div class="form-group col-md-6">
        <label class="col-md-4" style="text-align:right;">Interlocuteur</label>
        <input type="text" class="col-md-3 input-sm"
            ng-model="adresse.interlocuteur" name="interlocuteur"> …

这是我在角度ui-select中得到的完整错误

Error: [$interpolate:interr] Can't interpolate: {{$select.getPlaceholder()}} TypeError: Cannot read property 'length' of undefined

我的标记是:

  <ui-select multiple ng-model="case.keywords" theme="bootstrap">
    <ui-select-match placeholder="Select keywords...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="keywords in keywords | filter: $select.search">
      <div ng-bind-html="keyword.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
<p>Selected: {{case.keywords}}</p>

除了get来自db的关键字数组之外,控制器没什么特别之处.显然ngSanitize,ui.select它包含在模块依赖项中.

我遇到的另一个问题是选择不可见.我能够显示所选的,但选项列表不可见.我正在使用bootstrap主题,select.css被引用.这是它的样子

谢谢您的帮助.

我正在使用ui-select（https://github.com/angular-ui/ui-select）。

ui-select支持我们进行搜索，选择和多选。但是，如何获取用户在ui-select搜索框中输入的值？如果用户输入的值不正确，我想显示一条错误消息。

示例：在下面的带有Select2主题的插件中，当用户键入：'asdasd'（此文本与任何结果均不匹配）时，我要显示一条消息“找不到任何结果！” 通过分配给'scope.person.selected'

plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

我怎样才能做到这一点？

非常感谢！

我觉得我的头撞在墙上.

有没有人在ui-grid中使用ui-select的例子？(3.0)

我正在努力利用ui-grid内部的ui-select作为cellTemplate,即:

{ field: "Job.JobTitle", displayName: "Job Title", enableCellEdit: true, editableCellTemplate: '<ui-select ng-model="job.selected" theme="select2" style="width:100%;"><ui-select-match placeholder="Select a job...">{{$select.selected.JobTitle}}</ui-select-match><ui-select-choices repeat="job in jobs | filter: $select.search"><div ng-bind-html="job.JobTitle | highlight: $select.search"></div></ui-select-choices></ui-select>' }

任何人都有机会在ui-grid里面有一个ui-select的例子吗？

谢谢!

我在谷歌搜索这个问题,但仍然无法找到正确的讨论.我们在一个表单(angularJS app)中使用valdr和ui select,我们遇到的问题是ui-select渲染的输入不会获得name属性,因此,angular会抛出一个错误:

Error: Form element with ID "undefined" is not bound to a field name.
at d.link (http://localhost:8080/bower_components/valdr/valdr.min.js:1:8414)
at invokeLinkFn (http://localhost:8080/bower_components/angular/angular.js:8141:9)
at nodeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7653:11)
at compositeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7009:13)
at nodeLinkFn (http://localhost:8080/bower_components/angular/angular.js:7648:24)
at http://localhost:8080/bower_components/angular/angular.js:7884:13
at processQueue (http://localhost:8080/bower_components/angular/angular.js:13071:27)
at http://localhost:8080/bower_components/angular/angular.js:13087:27
at Scope.$get.Scope.$eval (http://localhost:8080/bower_components/angular/angular.js:14287:28)
at Scope.$get.Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:14103:31) <input type="text" autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="{{ $select.baseTitle }}" aria-owns="ui-select-choices-{{ $select.generatedId }}" aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}" class="form-control ui-select-search ng-pristine ng-untouched ng-valid" placeholder="{{$select.placeholder}}" ng-model="$select.search" ng-show="$select.searchEnabled &amp;&amp; $select.open">

所以我们在ui-select指令上尝试了一些hack-select指令,例如templateCache重写/修改,隐藏的输入使用相同的模型,但结果是相同的.

btw templateCache重写是最糟糕的方法,因为这个指令在appwide中被其他指令使用,我们无法破解整个应用程序.

有人遇到过这个问题吗？

代码段: http ://plnkr.co/edit/sDNDDtnhi7Jxi9mtjDTl？p =preview

如何使用ui-select实时从REST服务获取数据？

有一个带有预加载数据的ui-select示例,但是对于相同的情况,假设有1000个用户,并且您想要选择其中的5个并按名称搜索,例如,您是否可以实时调用服务？某种程度上喜欢打字.

我在我的cusom指令里面使用angular-ui ui-select指令叫做timezone.问题是当从列表中选择时区时,不会更新周围控制器的模型对象.这是我的指令代码:

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

myApp.directive('timezone', function () {
return {
    restrict: 'AE',
    template: '<ui-select theme="bootstrap" ng-model="tzModel" style="min-width: 300px;"> <ui-select-match placeholder="Select a timezone in the list">{{$select.selected}}</ui-select-match> <ui-select-choices repeat="tz in timezones | filter: $select.search"> <div ng-bind-html="tz"></div> </ui-select-choices> </ui-select>',

    scope: {
        tzModel : '=',
    },
    link: function(scope) {
        scope.timezones = ["Africa/Abidjan", "UTC"];
    }
};
});

我的控制器:

myApp.controller('MyCtrl', function ($scope) {
  $scope.foo = {name:"Africa/Abidjan"};
});

这是我在html中使用它的方式:

<div ng-app="MyApp" ng-controller="MyCtrl">
  {{foo}}<br />
  <timezone tz-model="foo.name" />
</div>

问题是,当我从下拉列表中选择一个新值时,我的控制器对象不会更新. 这是jsFiddle 我猜ui-select有问题,因为我和其他组件做了同样的工作.

我在bootstrap模态窗口中使用angular-ui-select和~1500项的列表.

用户执行的每个操作都会延迟2秒.我试图通过使用'minimum-input-length'来提高性能,但过滤器不起作用.

Plunkr示例:https://plnkr.co/edit/H0kbeR4kHfZFjsBnpjBC ？ p = preview

我的Html:

<ui-select multiple sortable="true" ng-model="vm.selected" theme="select2" style="width: 100%;">
              <ui-select-match placeholder="Select...">{{ $item.name }}</ui-select-match>
              <ui-select-choices repeat="item in vm.items | filter: $select.search" minimum-input-length="2">
                <div ng-bind-html="item.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>

1. 有谁知道如何提高性能？

2. 如何申请最小字符过滤？

   谢谢.

假设我有一个ui-select的以下(非常基本的)代码

<ui-select ng-model="vm.selected">
    <ui-select-match>
        <span ng-bind="$select.selected.label"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in vm.items">
        <span ng-bind="item.label"></span>
    </ui-select-choices>
</ui-select>

现在,这会生成所有html节点等,其中包含用于搜索和过滤列表中显示的选项的输入.

该问题是:

如何设置(在任何变体中)输入搜索的最大长度？

该指令不提供任何内置数据属性.

因此,预期的行为是:如果我设置最大长度为10个字符,当用户键入/复制+粘贴大于指定长度的字符串时,输入搜索中的字符串会被截断(但是,如果你能提供给我的话)与其他一些解决方案,允许用户在输入搜索中只输入一定数量的字符,我真的很感激)

我在SO上找到了这个相关的问题,但它并不适用于这种情况,因为我无法通过ng-model或类似的方式访问输入搜索中输入的值.