标签: angularjs-select2

我们一直在使用 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,我注意到点击任何标签会使它们变成蓝色,这对我想做的事情没有任何意义.如果点击,我希望删除它们.经过检查,我注意到一个'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"？

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

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.

我想像这样创建一个html输出:

 <select>
      <option value="" class="">-- Choose category --</option>
      <optgroup label="Dogs">
           <option value="0">Great Dane</option>
           <option value="1">Lab</option>
      </optgroup>
      <optgroup label="Cats">
           <option value="2">Black</option>
           <option value="3">Tabby</option>
      </optgroup>
 </select>

从这样的数组:

 var animals = [{
     name: 'Dogs',
     subcats: ['great dane', 'lab']
 }, {
     name: 'Cats',
     subcats: ['tabby', 'black']
 }, ];

并将模型绑定到设置2个值,animal.type(dog或cat)和animal.subcategory.

尝试了一堆东西......我想我需要使用ng-repeat并通过它来破解...任何帮助都是很有用的.

这是我尝试过的代码.我试图添加带有angularjs代码和HTML代码的占位符,但它不适用于这两种情况.请帮助我或建议我在这种情况下如何做

 <select ui-select2="select2Options" 
style="width:100%" 
ng-model="SelectedProcessandIngredients"
 data-placeholder="Select or Add Process/Ingredient" 
ng-options="c.name group by c.status for c in colors"
 ng-change="selectedinnerLoop()" >          
        </select>

Angular js代码:

$scope.select2Options = {
        placeholder : "Select or Add Process/Ingredient",
        formatResult : processList,
        formatSelection : processList,
        escapeMarkup : function (m) {
        return m;
        }

    };

根据Angular文档,您可以创建一个不属于模型的null选项.这允许您有一个描述性选项.IE在他们的例子中有-- choose color --.如何将null选项设为默认选项？我希望用户在首次加载页面时看到此描述性空选项.

如果您还可以告诉我如何通过角度禁用null选项,则可以获得奖励积分.