标签: ui-select

角度版本:AngularJS v1.3.6 http://github.com/angular-ui/ui-select:版本:0.8.3

var p1 = {name:'Ramesh',email:'Ramesh@email.com',年龄:99};

   $scope.people = [
            { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
            { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
            { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
            { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
            { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },               
            { name: 'Adrian',    email: 'adrian@email.com',    age: 21 },
            p1
        ];

 $scope.people.selected = p1 ;

HTML:

  <ui-select  class="full-width-select select" ng-model="people.selected" theme="select2">
                <ui-select-match  allow-clear="false">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="person in people | filter:$select.search"> …

我试图在每次点击按钮时添加一个新的选择,

html:

 <div ng-repeat = "select in selects track by $index">
  <ui-select ng-model="selects[$index]" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
 </div>
 <button ng-click="addNewSelect()"> Add new select</button>

控制器:

  $scope.selects = [{}];
  $scope.addNewSelect = function() {
    $scope.selects.push({});
  }

对象数组保存在数组'choices'中,但占位符不在选择中,因为我最初使用空对象初始化ng-model.如何让占位符在这种情况下工作？

这是相同的Plunker.

我正在使用用于angularJS 的ui-select选择框,我需要选择框的箭头在左侧以匹配我拥有的其他选择框和rtl网站的整个方向.

在我发现的所有例子中,箭头在右侧显示.我尝试设置direction和float属性但没有任何效果.

我正在使用bootstrapui-select选择框的样式.在"真正的"自举选择框中,只需设置即可轻松将箭头向左移动dir="rtl".

有任何想法吗？谢谢!

编辑:

这是一个官方的例子,你可以玩它.

我正在使用 ui-select 从服务器获取数据并将其填充到下拉列表中（搜索和选择）。我为你创造了一个笨蛋。

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

一旦我从选择器中选择了任何值，我就可以进一步更改。但无法去除。我怎样才能做到这一点？

我正在尝试在我的项目中使用角度ui-select但不知何故css无法正常工作.

index.html的:

  <link rel="stylesheet" href="bower_components/bootstrap-social/bootstrap-social.css" />
  <link rel="stylesheet" href="bower_components/angularjs-slider/dist/rzslider.css" />
  <link rel="stylesheet" href="bower_components/angular-dropdowns/dist/angular-dropdowns.css" />
  <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
  <link rel="stylesheet" href="bower_components/textAngular/dist/textAngular.css" />
  <link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css" />
  <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
  <link rel="stylesheet" href="bower_components/angularjs-toaster/toaster.css" />
  <link rel="stylesheet" href="bower_components/ngprogress/ngProgress.css" />
  <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
  <script src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
  <script src="bower_components/perfect-scrollbar/src/perfect-scrollbar.js"></script>
  <script src="bower_components/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js"></script>
  <script src="bower_components/moment/moment.js"></script>
  <script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
  <script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
  <script src="bower_components/angularjs-geolocation/src/geolocation.js"></script>
  <script src="bower_components/angularjs-toaster/toaster.js"></script>
  <script src="bower_components/ngprogress/build/ngProgress.js"></script>
  <script src="bower_components/angular-ui-select/dist/select.js"></script>

包装版本:

Angularjs: 1.4.5 
ui-bootstrap: 0.11.2 
Angular ui-select: 0.12.1

html文件:

<ui-select ng-model="stream.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
  <ui-select-match …

一旦用户使用鼠标单击选择了一个选项并进入开始搜索,我需要从ui-select输入中删除焦点.现在发生的事情是焦点仍然存在于select中,因此下拉列表在单击enter时打开.

  <ui-select id= "country" ng-model="ctry" name= "country"  theme="bootstrap">
      <ui-select-match >{{text || $select.selected.id}}</ui-select-match>
          <ui-select-choices repeat="countryL in countryLookup | filter: $select.search">
             <div ng-bind-html="countryL.id | highlight: $select.search"></div>
                <small ng-bind-html="countryL.name | highlight: $select.search"></small>
       </ui-select-choices>

我想找到一种方法来清除代码选择ui-select.

例如,我有以下代码

<ui-select ng-model="selectedCustomerCode" ng-if="CustomerIds.length>1" on-select="CustomerCodeFiltersOnSelectCallback($item, $model)" theme="bootstrap">
  <ui-select-match class="ui-select-match" allow-clear="true" placeholder="??????? ??????? ??????...">{{$select.selected.CCode}}</ui-select-match>
  <ui-select-choices class="ui-select-choices" repeat="customer in CustomerIds | propsFilter: {CCode: $select.search}">
    <div ng-bind-html="customer.CCode | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

我想碰上一个清晰的按钮并清除一些输入,包括ui-select.清除ui-select的代码是什么？

我使用Angular UI https://github.com/angular-ui/ui-select.

我对控件的使用有一个小问题.我想完全避免使用箭头(这似乎允许用户不幸地提交整个表单).见下面的红圈:

这是相应的html:

<div class="form-group">
        <label for="address" class="control-label col-lg-3">signup.form.address</label>
        <div class="col-lg-6">
            <ui-select ng-required="true" id="address" name="address" ng-model="signupForm.addressReference"  reset-search-input="false" theme="bootstrap">
                <ui-select-match placeholder="Select address...">{{$select.selected.description}}</ui-select-match>
                <ui-select-choices repeat="address.reference as address in addresses track by $index" refresh="chooseAddress($select.search)" refresh-delay="0">
                    {{address.description }}
                </ui-select-choices>
            </ui-select>
        </div>
        <div ng-messages="signupNgFormCtrl.address.$error" ng-if="signupNgFormCtrl.$submitted" class="col-lg-3">
            <div ng-message="required">required</div>
        </div>
    </div>

有人可以帮忙吗？

问候,

我正在使用ui-select,并希望在用户点击输入时选择列表中的第一个选项(即ui-select-search上的模糊事件).目前,选择框保持打开状态,直到用户选中或进行选择.

我在弄清楚如何从ui-select. 我做了一个片段来告诉你我想做什么。在我的 html 中，我做了一个带有 ng-change-event 回调的 ui-select: ng-change="onDatasetChanged(whatShouldBehere?)"。选择该选项后，我只想onDatasetChanged()在控制器的-method内打印所选模型。

angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
  
  $scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
  $scope.availableData=["a","b","c"]; //some random options
  
  $scope.onDatasetChanged = function(selectedValue){
    console.log("selectedValue",selectedValue);
  }
  
});

<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
  
  
  
  <ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
    <ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
      <ui-select-choices repeat="data in availableData | filter:$select.search">
                        {{data}}
      </ui-select-choices>
  </ui-select>
  
  
  
</body>