标签: angular-ui-select

Angular UI选择单击时删除项目

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

ng-click="$selectMultiple.removeChoice($index)"
Run Code Online (Sandbox Code Playgroud)

做一些挖掘,我找到了这个被解雇的模板,它是"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>
Run Code Online (Sandbox Code Playgroud)

这破坏了标签系统(见图) 在此输入图像描述

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

        ng-click="$selectMultiple.activeMatchIndex.removeChoice($index)"
Run Code Online (Sandbox Code Playgroud)

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

javascript angularjs angularjs-select2 ui-select angular-ui-select

5
推荐指数
1
解决办法
4205
查看次数

如何为下拉选项创建指令?

假设我在应用程序中为国家/地区使用了相当多的下拉选项(也称为组合框)。\n为了避免一遍又一遍地重复相同的代码,我想为此创建一个指令。

\n\n

但是:使用以下指令并不能满足我的所有期望(见下文),而复制粘贴模板确实满足我的所有期望。

\n\n
app.directive(\'countrydropdown\', function($compile) {\n  return {\n    restrict: \'E\', //attribute or element\n    scope: {\n      countryUri: \'=\'\n    },\n    templateUrl: \'countrydropdown.html\',\n    controller : function($scope) {\n      $scope.listItems = [ \n        {name: \'Afghanistan\', code: \'AF\'},\n        {name: \'\xc3\x85land Islands\', code: \'AX\'},\n        {name: \'Albania\', code: \'AL\'},\n      ];      \n
Run Code Online (Sandbox Code Playgroud)\n\n

我的模板在哪里:

\n\n
<div>\n  model (inside directive): {{countryUri}}\n\n   <ui-select ng-model="countryUri" theme="selectize" >\n    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>\n    <ui-select-choices repeat="\'/api/countries/\'+country.code as country in listItems | filter: $select.search">\n      <span ng-bind-html="country.name | highlight: $select.search"></span>\n      <small …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive angular-ui-select

5
推荐指数
1
解决办法
1512
查看次数

ui-select 不会在首次单击 ngAnimate 时将输入元素聚焦

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

\n\n

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

\n\n

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

\n\n
  <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
Run Code Online (Sandbox Code Playgroud)\n\n

\n\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 …
Run Code Online (Sandbox Code Playgroud)

angularjs ui-select2 ui-select angular-ui-select

5
推荐指数
0
解决办法
1306
查看次数

当Modal中的大项目列表时,angular-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>
Run Code Online (Sandbox Code Playgroud)
  1. 有谁知道如何提高性能?
  2. 如何申请最小字符过滤?

    谢谢.

angularjs ui-select angular-ui-select

4
推荐指数
1
解决办法
4510
查看次数

如何在角度ui.grid中找到已排序的列和按什么顺序排列

如何在角度ui.grid中找到已排序的列和按什么顺序排列.其实我想设置基于服务器的分页.为此,我将params中的数据发送为{pageNumber,pageSize,column,order}.现在如何找到用户已经排序的列(名称/年龄/数字)以及角度ui.grid中的顺序(ASC/DESC)

angularjs angular-ui angular-ui-grid angular-ui-select

3
推荐指数
1
解决办法
7523
查看次数

angularjs ui-select-choices下拉aphabetical顺序取决于给定的输入

我正在使用https://github.com/angular-ui/ui-select用于我正在处理的网站.目前代码如下:

       <ui-select ng-model="model.states">
         <ui-select-match placeholder="State">
           {{$item.Name}}
         </ui-select-match>
         <ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search">
            {{item.Name}}
         </ui-select-choices>
      </ui-select>
Run Code Online (Sandbox Code Playgroud)

当我在输入字段中输入任何内容时,例如"a",ui-select-choices显示包含"a"的所有字段(默认情况下).我想要做的是,我想显示所有以"a"开头的州.如果输入框中未输入任何内容,则按字母顺序显示所有字段.有人可以提出解决方案吗?我看过其他一些帖子,但还没有人回答这个问题.提前致谢.

这是一个例子,假设州阵列有加利福尼亚州,康涅狄格州,阿拉斯加州,亚利桑那州,纽约州等州.

如果输入字段中没有输入任何内容,则下拉列表应显示阿拉斯加州,亚利桑那州,加利福尼亚州,康涅狄格州,纽约州(可以使用orderBy过滤器实现).

如果用户在输入字段中键入"a",则下拉列表应显示亚利桑那州,亚利桑那州,并且没有其他字段,因为阿拉斯加州和亚利桑那州只有以"a"开头的字段.如果用户键入"c",则下拉列表应显示康涅狄格州加利福尼亚州.如果用户键入"ca",则下拉列表应仅显示加利福尼亚,因为它仅匹配给定的输入字符串.

javascript jquery angularjs angular-ui angular-ui-select

3
推荐指数
1
解决办法
8282
查看次数

Angular ui.select不绑定到ng模型

我正在使用角度ui.select,我将选择的值绑定到模型时遇到问题.我正在尝试使用ui.select设置对象的变量ng-model="data".但由于某种原因,它不会选择值不会绑定到模型.这是我正在使用的代码:

<ui-select ng-model="data" ng-disabled="disabled" theme='select2' style="min-width: 300px;" title="some title">
   <ui-select-match placeholder="Select a credit status in the list">[[ $select.selected.variable ]]</ui-select-match>
   <ui-select-choices repeat="options in options | filter: $select.search">
      <p>[[ options.variable ]]</p>
  </ui-select-choices>
</ui-select>
Run Code Online (Sandbox Code Playgroud)

在我的情况下,使用它不会将选定的值绑定到模型.然后我使用$parent.data哪个确实有效,但是当我使用多个ui-choose时,只有一个能够一次工作.

一定有什么我做错了任何帮助表示赞赏.

angularjs angular-ui-select

3
推荐指数
1
解决办法
3336
查看次数

ng-repeat 中的 Angular ui-select

我在 ng-repeat 中使用 ui-select 为集合中的每个项目创建一个选择框。但是,当我在任何单个选择框中选择一个节点 ID 时,它最终会在所有选择框中都被选中。如何配置{{$select.selected.id}}部件以便仅更新当前选择框?这是相关的代码:

<div style="float:left; width:160px;" ng-repeat="choice in choices">
<div class="input-group">
    <ui-select ng-model="node.selected" theme="bootstrap" ng-disabled="disabled" reset-csearch-input="true" style="width:50px; float:left">
        <ui-select-match placeholder="{{choice.to_node_id}}">{{$select.selected.id}}</ui-select-match>
        <ui-select-choices repeat="node in nodes | filter: $select.search">
            <div ng-bind-html="node.id | highlight: $select.search" ng-click="updateChoiceLink(choice, node)"></div>
        </ui-select-choices>
    </ui-select>
</div>
Run Code Online (Sandbox Code Playgroud)

angularjs angular-ui-select

2
推荐指数
1
解决办法
2272
查看次数

使用对象数组中的 ID 设置 ui-select 值

好吧,我有这种格式的对象数组

$scope.itemArray = [
        {id: 1, name: 'first'},
        {id: 2, name: 'second'},
        {id: 3, name: 'third'},
        {id: 4, name: 'fourth'},
        {id: 5, name: 'fifth'},
    ];

$scope.selectedItem = $scope.itemArray[0];//this works fine
$scope.selectedItem = $scope.itemArray[0].id;//this doesn't works
Run Code Online (Sandbox Code Playgroud)


这是 html 部分:

<ui-select ng-model="selectedItem">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in itemArray | filter: $select.search">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
  </ui-select>
Run Code Online (Sandbox Code Playgroud)

我想要做的是使用id列设置 ui-select 值,但我无法这样做。我确信我在某个地方错了,而且对这个插件也很陌生。请帮我。

angularjs ui-select angular-ui-select

2
推荐指数
1
解决办法
3277
查看次数

Angular:ui-select.使用`refresh`功能自定义标记

我需要输入多选的能力.问题是数据在用户点击时动态地来自服务器,如果没有找到合适的数据,我需要创建一个新标签.代码示例:获取地址

当前示例不显示标签内的信息,tagging-label="(custom 'new' label)"如果输入新信息则不显示标题(例如,您可以键入类似" blablablabla "的内容,服务器应该不返回任何内容)

如何处理?我可以将所有结果保存到数组并使用数组而不是服务器的解决方法对我不起作用...

javascript angularjs angular-ui-select

1
推荐指数
1
解决办法
6541
查看次数

如何阻止以角度ui-select输入的自由文本

Lib链接:https://github.com/angular-ui/ui-select

有没有办法在multiSelect中阻止用户编辑?

我想允许用户只清除以前选择的数据,但是如何阻止他输入ui-select中的任何自由文本

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

<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>
Run Code Online (Sandbox Code Playgroud)

参考上面的代码和plunker,目前在ui-select"蓝色,红色"颜色被选中,用户可以清除这些值,但如果用户试图在ui中输入一些文本,请选择允许修改,

"但我的要求是阻止用户在该字段中输入此类文本."

提前致谢.

angularjs ui-select angular-ui-select

0
推荐指数
1
解决办法
4687
查看次数