web-dev-qa-db-ja.com

Angular ui-selectは、angular-ui-bootstrapモーダルに含まれている場合、オプションのリストを表示しません

anular-ui-bootstrap modal ディレクティブで問題が発生しています。 html selectの代わりに、アプリでAngularの i-select コンポーネントを使用しています。この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>

どんな助けでも大歓迎です。前もって感謝します。

angularjsangular-ui-bootstrapbootstrap-modalui-select
12
Dhana Sekar

私の質問に対するすべての回答に感謝します。実際、私は長い間この問題を修正するために多くのことを試みていましたが、最終的に私自身、それがAngularJSの問題であると考えました。はい、更新するだけでこれを修正できましたAngularJSのバージョンを1.2.16から1.2.20に。そして、作業リンクは ここ

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

に

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>

また、以下のマイナーな修正

<div ng-bind-html="address.a | highlight: $select.search"></div>

に

<div ng-bind-html="address.name | highlight: $select.search"></div>
1
Dhana Sekar

私はngDialogでこれ（または同様のもの）に遭遇しました。次のようにng-hide属性を追加して、問題を修正しました。

<ui-select-choices repeat="..." ng-hide="!$select.open">

これにより、ダイアログ内で何らかの理由でselect-choicesにコンポーネントからng-hide空の属性が内部的に与えられていた問題が修正されました。これがこの問題の回避にも役立つことを願っています。

11
DeezCashews

属性を追加する必要があります：append-to-body="false"または、必要な場合は、CSSを変更します。

body > .ui-select-bootstrap.open {
    z-index: 1100; /* greater then ui bootstrap modal, that 1050 */
}
9
Alexander Anikeev

Ui-selectのselect.jsの下部にある$ templateCacheでは、最初のテンプレートは 'bootstrap/choices.tpl.html'であり、 'ng-show =\"$ select.items.length> 0 \"'が存在する場合、これは、表示する選択肢がないときにドロップダウンリストが表示されないようにすることです。

あなたの問題は、ui-selectがモーダルでレンダリングしているときに、コレクション（この場合はアドレス）が空であるため、その長さが0であるため、「ng-hide」クラスが要素に追加され、原因であると考えました。問題。

私のハッキング方法は、単に「ng-show =\"$ select.items.length> 0 \"」を削除するか、「ng-show =\"$ select.items.length> = 0 \"」に変更することです。 '（役に立たない）。副作用は、表示する選択肢がない場合、ドロップダウンに空のバンクリストが表示されることです。私はむしろ副作用が好きです、それはリストが機能しているというユーザーの保証を与えます。

ただし、空のリストの高さが狭すぎるため、cssクラスを追加して、空のリストを少し高くします。

.ui-select-choices {min-height：30px; }

5
Rex

私は同じ問題を抱えていました、それを解決しました：

<div class="row" ng-controller="*protopathyUISelectCtrl as ctrl*">
  <div class="form-group m-b-sm required col-md-4 col-xs-3" >
      <div class="input-group">
        <span class="input-group-addon">test</span>
        <ui-select ng-model="ctrl.country.selected" theme="bootstrap" title="Choose a country" ng-disabled="disabled" append-to-body="false">
          <ui-select-match placeholder="test">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="country in ctrl.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>
      </div>
  </div>
</div>
2
user6874862

これは、不透明度が0に設定されるモーダルの場合のui-selectの問題です。さまざまなアプローチを試しましたが、問題は解決しませんでした。

このリンクは問題を説明しています。

これがあなたにできることです：

  • Bool変数を追加し、$ scopeでtrueに設定します（例：$ scope.showDD = true）
  • Ui-select-choicesに、次のコードを追加します。
<ui-select-choices repeat="dog in dogs" ng-show="(showDD) || ">

ここでは、showDD変数を中かっこで囲むことにより、評価の優先度をshowDDに高く設定し、ui-selectが行う他のチェックとORを実行します。 ORであるため、showDDは、ui-selectが実行する内部チェックをオーバーライドし、不透明度は0に設定されません。

0
Sharath

ここselect.jsでエラーが発生します

(line 610: ctrl.searchInput.css('width', '10px');)

この場合、入力タグの幅は10pxです。この10px-areaをクリックすると、機能します。このlibをbower経由で使用するので、次の方法でソースに触れずに修正しました。

<ui-select-match placeholder="placeholder..." ng-class="{empty: !account.roles.length}">{{::$item.name}}</ui-select-match>

したがって、モデル配列が空の場合は、入力の幅を100％にします。 'select2'テーマを使用します

.empty.ui-select-match + .select2-search-field,
.empty.ui-select-match + .select2-search-field input{
    width: 100% !important;
}
0
Denys Davydov

同様の問題がありました。 ng-showをng-ifに置き換えることで解決しました

<button ng-click="toggle=!toggle">Toggle</button>
<div ng-if="toggle">
    <ui-select multiple ng-model="data.projectStatusArray" theme="bootstrap" ng-disabled="disabled" style="margin:0px;">
        <ui-select-match class="ui-font-medium" placeholder="Choose Filter"> {{$item.display_name}} </ui-select-match>
        <ui-select-choices repeat="fl.name as fl in filterByArray | filter: $select.search">
            {{fl.display_name}}
        </ui-select-choices>
    </ui-select>
</div>
0
jerrymouse

同じ問題が発生しました。属性append-to-body="false"を追加して修正しました。

<ui-select title="Origem" ng-disabled="disabled" append-to-body="false">
 ...
</ui-select>
0
Adriano Rosa

私も同じ問題を抱えていたので、変更しました：

append-to-body="true"

に：

append-to-body="false"
0
ThusharaHettigoda

行を次のように変更した場合：

<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0">

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

アドレスの名前が表示されます。

0
Stu

また、ui-modalの使用中にこの問題が発生し、ui-select-choicesディレクティブの「ng-class」条件を使用してこれを解決しました。

modal.html `` `

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true">
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </ui-select-choices>
    <ui-select-no-choice>
        一致するものは見つかりませんでした。
    </ui-select-no-choice>
</ui-select>

`` `

app.js `` `

$scope.onSelect = function(item) {
    $scope.open_select = false;
}

`` `

style.css `` `

.select_open {
    opacity: 1 !important;
}

`` `

それが役に立てば幸い。 ????

0
Warren Clarin