标签: angular-ui-select

我试图在我的angularjs中使用ui-select指令,但它没有显示,我试着按照文档,这就是我做的:

 <ui-select ng-model="form.gender" theme="bootstrap">
    <ui-select-choices repeat="gender in genders">
        {{ gender.name }}
    </ui-select-choices>
</ui-select>

然后我有一系列性别:

$scope.genders = [
    {
        name: 'Male'
    },
    {
        name: 'Female'
    }
];

我以前没有真正使用过这个指令所以我对我做错了有点困惑.

我的浏览器控制台中没有显示错误,我也在我的应用程序中包含了该模块.

我想使用它不仅仅是一个简单的性别下拉,但我认为这是一个开始,如果我能做到这一点,那么我将不会有任何更多的问题.:)

编辑:所以我清除了我的浏览器缓存并刷新了我的页面,这次我确实注意到一个错误:

Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

在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这里的例子.

我目前面临着在 ui 引导模式中显示 ui-select 下拉菜单的问题，该模式应用了溢出 css。

目前，当打开 ui-select 下拉列表时，选项列表会在模态中打开，并被overflow-y:scroll;应用于模态主体的样式部分隐藏。

我想找到一种解决方案，使下拉菜单位于模态溢出之外，并且可以与模态的边缘重叠，就像模态没有应用溢出时一样。

以下 plunker 演示了我面临的问题。模式中的溢出切换按钮将在应用/不应用溢出之间切换，以演示问题和所需的结果。

https://plnkr.co/edit/7eZ7GuPFMiEFMT2hogMV?p=preview

overflow-y: scroll在这种情况下，模态体是必需的。模态页眉和页脚必须在页面上可见而无需滚动。将溢出添加到模态主体以仅将滚动应用于此区域，从而允许将信息添加到此区域，而无需增加页面底部下方的模态高度。用户可以动态编辑 modal-body 中显示的数据，这可以向 modal 添加额外的数据行，每行数据都可以包含 ui-select 元素。

点击"选择黄色"按钮,我想在所选列表中添加黄色.黄色正在被选中,但下拉列表仍显示黄色.以同样的方式,我想点击"取消选择黄色"按钮取消选择黄色.我能够取消选择黄色,但下拉列表中没有出现黄色.请帮我解决这个问题.HTML:

<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>

    <input type="button" value="select yellow color" ng-click="selectYellowColor()"/>
    <input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/>

JS:

  $scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
  $scope.multipleDemo = {};
  $scope.multipleDemo.colors = ['Blue','Red'];

  $scope.selectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){
      $scope.multipleDemo.colors.push($scope.availableColors[3]);
    }
  };

  $scope.deselectYellowColor = function(){
    if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){
      var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]);
      $scope.multipleDemo.colors.splice(index, 1);
    }
  };

这是plunker链接 http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

我在一个简单的用户注册表单中使用angular-ui-select:

<ui-select ng-model="user.countryCode" convert-to-string theme="selectize" class="dropdown">
    <ui-select-match placeholder="{{::strings('userDetails.countryPlaceholder')}}">{{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries">
        <span ng-bind-html="country.name | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

这是我的国家/地区数组定义:

$scope.countries = [
            {name: 'Afghanistan', code: 'AF'},
            {name: 'Albania', code: 'AL'},
            {name: 'Australia', code: 'AU'},
            {name: 'Austria', code: 'AT'},
            {name: 'Azerbaijan', code: 'AZ'},
            {name: 'Belarus', code: 'BY'},
            {name: 'Belgium', code: 'BE'},
            {name: 'Belize', code: 'BZ'},
            {name: 'Benin', code: 'BJ'}
];

我正在我的html中创建用户对象,每个字段都有一个绑定到用户某些属性的ng-model.当我使用诸如firstName的简单输入时,它很容易:

<input class="form-control" type="text" name="firstName" ng-model="user.firstName"/>

但是使用下拉列表 - 我希望国家/地区名称显示在下拉列表选项中,并将其代码放在用户对象中.我想避免在控制器中编写代码.(即$ scope.user.countryCode = $ scope.country.selected.code;)

我正在尝试用量角器测试ui-select.在这个ui-select我有一个国家列表.我的HTML看起来像:

<ui-select ng-model="datiAnagrafici.countryOfBirth" name="countryOfBirth" theme="bootstrap" reset-search-input="true" append-to-body="true" required blur>
                <ui-select-match placeholder="paese di nascita">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="country.code as country in countries | filter: {name:$select.search}">
                    <span ng-bind-html="country.name"></span>
                </ui-select-choices>
</ui-select>

我的页面对象如下所示:

this.country = element(by.model('datiAnagrafici.countryOfBirth'));
this.fillForm = function(){
   this.country.sendKeys('IT');
}

在我的spec文件中,我有:

it('should fill the form', function() {
  form.fillForm();
})

但是当我运行我的测试时,ng-model没有填充发送的数据.你有什么建议吗？谢谢

我目前正在使用ui-select(https://github.com/angular-ui/ui-select)进行下拉菜单.我在index.html文件中包含了select.js和select.css.我还通过凉亭安装了角度消毒装置.

这就是我的控制器的样子:

use strict';

angular.module('myApp.home', [  'ui.select',     'ngSanitize']).controller('ScheduleCtrl', ScheduleCtrl);
ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
function ScheduleCtrl($stateParams, $state) {
    var vm=this;

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

    vm.scheduleEvents = [{
        id:1,
        name:'Event1'
    },
    {
        id:2,
        name:'Event2'
    }];

}

我的观点包含:

<ui-select ng-model="selectedItem">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in (vm.itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

但是,我的视图是空白的,它似乎没有达到ui-select指令.

我有一个dropdown list和一个ui-select.在下拉值的基础上ui-select绑定.但如果我直接粘贴其中的特定值ui-select显示为已选中.我们如何防止ui-select复制粘贴值？

示例如下所示.

                    <div class="dropdown-Finding">
                        <ui-select class="form-control dropdown-reviwerFinding-select" id="searchBarArea" onkeypress="return false;" multiple tagging tagging-label="false" ng-model="QiReviewerFindingType.selectedItems" theme="bootstrap">
                            <ui-select-match placeholder="Select Reviewer Findings">{{$item.ShortDescription}}</ui-select-match>
                            <ui-select-choices repeat="qiQueryFinding in qiQueryFindings | filter:$select.search">
                                {{qiQueryFinding.ShortDescription}}
                            </ui-select-choices>
                        </ui-select>
                        <span class="carat" open-menu-by-click="searchBarArea"></span>
                    </div>

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

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.

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

我试图使用Angular-Formly与角度ui-select一起使用$ http作为结果.

选项应该在用户输入时刷新.当我从另一个文本输入设置模型时,ui-select正确更新并根据在文本框中键入的内容显示相应的结果.

然而,当我直接输入ui-select框时,我没有返回值,并且templateOptions.options函数不会触发,并且$viewvalue不会更新.

我似乎也无法访问$select.search已更新但在expressionProperties中不可用的结果.

请参阅以下重现错误的JSBin:

http://jsbin.com/peducofaje/edit

我很感激这方面的帮助.