标签: ui-select

任何人都知道如何清除角度的ui选择框的选定值？

我想要select2的功能,你在selectbox中有一个小x.看起来不像是select2得到的allow-clear方法.

我正在使用ui-select的选择框.一切正常,但我想允许手动输入文本,并且不希望限制用户使用列表中的可用值.如果我输入文本,它会正确过滤我的列表.但是,当我没有点击一个元素并继续前进到下一个字段时,我的文本将被丢弃.

有任何想法吗？

谢谢和问候,亚历克斯

我不想显示我的代码因为我认为它不正确,但它被要求:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

数据存储在formData[field.id].selected.field.id是要显示的当前字段的编号(我动态生成表单).假设它存储一个唯一的int值.

编辑08.04.2015 我的解决方案: 我发现似乎没有相当于C#组合框.所以我继续使用了两个不同的领域.这不是我想要的,但它现在有效:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>
<?php echo __('Create a new element if value is not in list'); ?>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" ng-model="disabled[field.id]">
    </span>
    <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" …

在我的AngularJS项目中,我使用正常的选择下拉列表并使用ng-change进行函数调用,这完全正常.现在我想将相同的下拉列表迁移到ui-select.但是on-select函数调用不起作用,我尝试了不同的方法,但没有运气.请找我的plnkr

以下是我用ui-select尝试的两种方式:

<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <ui-select-match placeholder="Select a customer..">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>


<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <match placeholder="Select a customer in the list or search his name ">{{$select.selected.name}}</match>
    <choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </choices>
</ui-select>

我正在尝试使用ui-select,组件正在清理我的数组.

例:

{{ vm.staff_hotels }}
<ui-select multiple ng-model="x" theme="bootstrap">
    <ui-select-match placeholder="Not selected">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="hotel.id as hotel in vm.hotels | filter: {active: true} | filter: $select.search">
        <div ng-bind-html="hotel.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

屏幕上的变量"vm.staff_hotels"值为[1,2].

{{ vm.staff_hotels }}
<ui-select multiple ng-model="vm.staff_hotels" theme="bootstrap">
    <ui-select-match placeholder="Not selected">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="hotel.id as hotel in vm.hotels | filter: {active: true} | filter: $select.search">
        <div ng-bind-html="hotel.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

但是,如果我在ng-model中使用变量,我的值会更改为[null,null].

我遇到了这个问题,我不知道如何解决它.我在页面中使用了ui-select multiselect.首先,对获取数据的url进行http.get请求,然后填充ui-select选项.数据很大 - 数据长度为2100.此数据将显示为选项.(数据在加载页面期间在开头提取并存储在数组中)

但问题是每次我点击多选项来选择一个选项,填充列表需要4-5秒,页面变得非常慢.我该怎么做才能减少这段时间？

选择数据存储在数组中,数据类型是字符串数组.

  <ui-select multiple ng-model="selectedFields.name"  style="width: 100%;">
    <ui-select-match placeholder="Select fields...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="fields in availableFields | filter:$select.search">
      {{fields}}
    </ui-select-choices>
  </ui-select>

在控制器中,

$scope.selectedFields = {};
$scope.selectedFields.name = [];

$scope.init = function() {

    $http.get(url)
        .success( function(response, status, headers, config) {
            availableFields = response;
        })
        .error( function(err) {
        });
};

$scope.init();

如果不是这样,是否有其他选项/选择我可以使用哪些不会延迟显示选择选项？

我正面临着anular-ui-bootstrap模态指令的问题.我在我的应用程序中使用angular的ui-select组件作为html选择的替代品.这个ui-select在包含的任何页面中都能正常工作.但是当我试图将它包含在模态弹出窗口中时(使用ui-bootstrap $ modal服务),下拉列表不会显示选项

这个问题在这里转载

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.addresses = [{
  "id":1,
    "name": "chennai"
  }, {
    "id":2,
    "name": "banglore"
  }, {
    "id":3,
    "name": "madurai"
  }];
});

 <div class="modal-body">
        City
            <ui-select ng-model="selAddress">
                <ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="address in addresses track by $index" refresh-delay="0">
                    <div ng-bind-html="address.a | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            
            Selected: <b>{{ selAddress }}</b>
        </div>

任何帮助将非常感激.提前致谢.

$scope.property = new Property();
$scope.property.propertyType = {};

$scope.propertyTypes = [
    { value: 'ResidentialPlot', name: 'Residential Plot' },
    { value: 'CommercialPlot', name: 'Commercial Plot' },
    { value: 'Apartment', name: 'Apartment/Flat' },
    { value: 'Townhouse', name: 'Townhouse' },
    { value: 'House', name: 'Single Family House' },
    { value: 'Commercial', name: 'Commercial Property' }
];

<label for="ptype" class="col-sm-2 control-label">Property Type</label>
<p>Populated: {{property.propertyType}}</p>
<ui-select ng-model="property.propertyType" id="ptype" theme="selectize" ng-disabled="disabled" style="width: 300px;" title="Choose Property Type">
    <ui-select-match placeholder="Select a Property Type">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="propType in propertyTypes">
        <span ng-bind-html="propType.name"></span> …

情况:

我正在制作一个角度应用,我必须使用ui-select:在用户信息页面中,在选择中必须可以选择一个或多个标签.它几乎正常工作,除了我有问题得到并显示预先存在的标签.

代码:

视图:

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled">

  <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match>

  <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}">

    {{tag.name}}

  </ui-select-choices>

</ui-select>

<p>Selected: {{info_data.tags}}</p>

控制器:

$http({

    url: base_url + 'main/db_get_all_tags',
    method: "POST",

 }).success(function (data) {

    $scope.all_tags = data;

});

$scope.show_info = function() {

    var result_info = DbService.get_info( $stateParams.db_data_id );

    result_info.then( function( data )
    {
        $scope.info_data = data;

    });

};

ATTEMPT 1:

它发生了一种非常奇怪的行为.我没有在用户的信息页面中看到标签,甚至在ui-select中也看不到.除非刷新5/6次,否则突然它会神奇地工作,在用户信息页面和ui-select中显示标签.在这两种情况下,工作与否,我得到几个相同类型的错误消息:

无法读取未定义的属性"长度".

ATTEMPT 2:

为了解决这个问题,我在控制器中添加了这个代码:

$scope.info_data = { tags: [] };
$scope. all_tags = [];

而且我不再收到任何错误消息.该应用程序是稳定的,我可以在用户信息页面中看到正确的标签.唯一的问题是标签不再在ui-select中加载.

如果我选择一个新标签然后它工作正常,但我松开了预先存在的标签. …

我在一个网站中使用angular-ui-select,其中样式化的选择字段配置了一个名为的自己的标签ui-select.这很好用,但是进行W3C验证会导致此错误:

元素ui-select不允许作为元素的孩子div在这方面.(抑制此子树中的更多错误.)

这是一个示例代码:

<!doctype html>
<html lang="en">
<head><title>x</title></head>
<body>
 <div>
  <ui-select></ui-select>
 </div>
</body></html>

我知道<ui-select>预计不会有,但我怎么能更好地处理这个？

我可以将其包装到不同的标签中,还是有不同的方法ui-select而不是使用HTML标记？

在ui-select多重模式下,从选项列表中删除选定的选项(也在源代码中检查),但我只需要禁用所选的选项,如下所示,而不是删除.

上面的图片来自selectedjs.

有一个选项,ui-disable-choice禁用选项,但它只是使选择完全无法选择.

<ui-select-choices ui-disable-choice="person.name=='Adam'" repeat="person in people">
  <div ng-bind-html="person.name"></div>
</ui-select-choices>

那么,如何使选定的选项出现在选项中但禁用？

plnkr这里的例子.