标签: ui-select

是否有可能以及如何使我的ui-select只读？当然我已经尝试过ng-readonly ="isReadOnly",我在我的控制器中定义$ scope.isReadOnly = false; 当然,我想根据服务器上可以改变状态的数据"在运行时"计算它.

我正在使用ui-select库来进行"标记"功能.

我正在使用对象数组,其中每个对象都有id和name.它工作正常.

如果我输入不存在的标签,它会创建一个我想要的新标签,但我唯一的问题是如果用户输入已经存在的标签,它会同时显示新标签和现有标签.ui-select只有在尚未存在时才允许新标记.

如果我输入算法,那么它应该选择/显示现有的"Algorithm"标签,而不是允许重复标签插入.

我无法找到任何设置.他们的标记示例页面ui-select标记示例也发生了同样的问题.我想这不是那样的.那么在ui-select中这是可能的,还是应该在我的代码中处理它？有解决方案吗

这是我的代码:

<ui-select multiple tagging="questionVm.addNewTag" theme="select2" ng-model="addQueVm.newQuestion.tags" class="mdl-select">
    <ui-select-match  placeholder="Enter tags">
        <span ng-bind="$item.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="tag in (questionVm.allTags | filter: $select.search)">
        <span ng-bind="tag.name"></span>
    </ui-select-choices>
</ui-select>

我们一直在使用 ui-select ( https://github.com/angular-ui/ui-select ) 来主题下拉菜单，如 select2。此功能主要从一个方面发挥作用：默认占位符。

该代码主要遵循 ui-select 演示（此页面上的第三个示例：http : //plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview）。

就我而言，默认文本应该是“占位符”属性的文本。相反，它显示为空白，直到您选择一个选项。我们一直在使用一个技巧，我们在 Angular 控制器中设置 ui-select-match 的值来解决这个问题，但这远非完美，显然不是应该如何使用它。

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

有没有人以前遇到过这个问题，或者对我们做错了什么有任何想法？

题 :

如何将默认值设置为角度ui-select

从对象和对象获取的下拉值不具有默认值.

和ui-select应该在前端设置默认值.

例如:

下拉值如下

1 -all fruits 2 -apple 3 -banana 4-water melon

从2到4的值是从服务器发送的对象派生的.但是前端需要设置默认值,即1 - 所有水果

通过ui-select2参考下面的示例集如何在ui-select中迁移它？

<select ng-model="fID" class="select"  ui-select2 data-placeholder="select fruit">
            <option value="">All fruits</option>
            <option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option>
        </select>

<ui-select theme="select2" ng-model="fruits.selected">
            <ui-select-match placeholder="select please" allow-clear="false">                    {{$select.selected.name}}
</ui-select-match>
            <ui-select-choices repeat="f in fruits | filter:$select.search">
                <div ng-bind-html="f.name | highlight: $select.search:'underline'"></div>
            </ui-select-choices>
        </ui-select>

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview https://github.com/angular-ui/ui-select 链接:angular-ui/ui-select

在angularjs我有一个ui-select:

<ui-select ng-model="itemSelected.selected" theme="selectize" ng-disabled="disabled">
   <ui-select-match placeholder="Select an item...">{{$select.selected.Name}}</ui-select-match>
   <ui-select-choices repeat="item in itemsList">
      <span ng-bind-html="item.Name"></span>
   </ui-select-choices>
</ui-select>

如何在加载页面时从代码中选择项目？当我在控制器中加载页面时,我得到$scope.itemsList:如何从中选择特定项目controller？

谢谢

我有一个bootstrap模式,在其中,我有一个用于标记的ui-select.这是我的例子:

<div class="modal modal-invite">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ui-select multiple tagging tagging-label="" ng-model="email_list" theme="bootstrap" ng-disabled="disabled" on-select="" on-remove=""  title="Insert your friends email here." >
          <ui-select-match placeholder="Your friends email here...">{{$item}}</ui-select-match>
          <ui-select-choices repeat="email in email_list | filter:$select.search">
            {{email}}
          </ui-select-choices>
        </ui-select>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success">Invite</button>
      </div>
    </div>
  </div>
</div>

我的问题是:当我打开模态时$('modal-invite').modal('show'),占位符(和可点击区域)的大小是10像素,如下所示:

点击它后,它获得正确的宽度.
当模态打开时,如何使ui-select刷新它的大小？

我正在使用UI-Select,我注意到点击任何标签会使它们变成蓝色,这对我想做的事情没有任何意义.如果点击,我希望删除它们.经过检查,我注意到一个'x',它随后会发射:

ng-click="$selectMultiple.removeChoice($index)"

做一些挖掘,我找到了这个被解雇的模板,它是"match-multiple.tpl.html".我将ng-click复制到输入,使其如下所示.

<span class="ui-select-match">
  <span ng-repeat="$item in $select.selected">
    <span 
      class="ui-select-match-item btn btn-default btn-xs"
      tabindex="-1"
      type="button"
      ng-disabled="$select.disabled"

      ng-click="$selectMultiple.removeChoice($index)"
      ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}"
      ui-select-sort="$select.selected">
        <span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>
    <span uis-transclude-append></span>
  </span>
 </span>
</span>

这破坏了标签系统(见图)

编辑 - 尝试以下,错误消失,但点击没有做任何事情.

        ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)"

如何将ng-cick附加到标签而不是"X"？

假设我想要编辑一个现有实体,该实体具有一系列值,这些值也是可选值的一部分.例如

var preSelectedLanguages = [
    {id: 2, iso: "de"},
    {id: 3, iso: "fr"}
]

var languages = [
    {id: 1, iso: "en"},
    {id: 2, iso: "de"},
    {id: 3, iso: "fr"},
    {id: 4, iso: "it"},
    {id: 5, iso: "us"}
]

我的ui-select指令类似于:

<ui-select multiple ng-model="preSelectedLanguages">
    <ui-select-match placeholder="Select language...">
        {{$item.iso}}
    </ui-select-match>
    <ui-select-choices repeat="l in languages track by language.id">
        {{language.iso}}
    </ui-select-choices>
</ui-select>

然而ui-select-choices选项列表似乎无法删除重复项,即使我已经使用过track by language.id.

知道如何正确地做到这一点？

我有一个ui-select-match元素,当打开元素并在一行上悬停(突出显示)时,我需要一个工具提示,以便在文本溢出被边框切断的情况下显示该行的完整内容.

这似乎应该是ui-select的一个特性,但我找不到任何关于这样的东西的参考.到目前为止,我只找到了显示行内整个文本的解决方案.

谢谢!

问题是，当您在使用 ngAnimate 的 Angular 项目中有一个 ui-select 并单击它来输入内容时，您将无法输入，直到您再次单击输入元素。基本上，它似乎只关注第二次点击。

这似乎是引导主题的问题，并且列表中没有任何项目。

http://plnkr.co/edit/jqXDJLN33U75EO9imGER?p=preview

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

var app = angular.module(\'selectizeDemo\', [\n  \'ngAnimate\',\n  \'ngSanitize\', \n  \'ui.select\'\n  ]);\n\napp.controller(\'MainCtrl\', function($scope) {\n\n    $scope.countries = [];\n\n  /*$scope.countries = [ \n    {name: \'Afghanistan\', code: \'AF\'},\n    {name: \'\xc3\x85land Islands\', code: \'AX\'},\n    {name: \'Albania\', code: \'AL\'},\n …