7

私はAngularJSの初心者です。車のメーカー、モデル、年のネストされたリストを取得する API 呼び出しを行うアプリがあります。呼び出しの結果を表示する 3 つの ui-select 要素を作成しました。まず自動車メーカーのリストから始めて、そのメーカー内のモデルに絞り込み、最後にそのモデルの年数を絞り込みます。ユーザーが車のモデルの入力を開始できないように、空の場合は 2 番目と 3 番目の選択を無効にしたいと思います。

<form class="form-horizontal" ng-controller="instant_quote" ng-submit="loadQuote()" name="quoteform">
    <div class="form-group" id="Make">
        <label for="Makes" class="col-md-3 control-label">Make</label>
        <div class="col-md-9">
            <ui-select
                    id="Makes"
                    ng-model="request.make">
                <ui-select-match placeholder="Enter a Make…">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in makes | filter: $select.search">
                    <div ng-bind-html="choice.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

    <div class="form-group" id="Model">
        <label class="col-md-3 control-label">Model</label>
        <div class="col-md-9">
            <ui-select
                    id="Models"
                    ng-model="request.model"
                    ng-disabled="request.make == 'false'">
                <ui-select-match placeholder="Enter a Model…">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="choice in request.make.models | filter: $select.search">
                    <div ng-bind-html="choice.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>

これは、 Angular ui-select プレースホルダーが ng-model の初期化時に機能しないことに基づいて、各選択が空かどうかを判断しようとしている方法です

無効になっている入力はありません。

4

3 に答える 3

1

カスタム フィルターを使用する場合は、ui-select 'items' フィールドで操作することをお勧めします。

<ui-select ng-model="myCtrl.selectedItem" ng-disabled="!$select.search.length && !$select.items.length"
            theme="selectize">
                <ui-select-match placeholder="{{$select.disabled ? 'No items available' :'Start typing a name'}}"></ui-select-match>
                <ui-select-choices repeat="myitem in myFilteredItems = ( myCtrl.myItems| filter:{ someMyItemField:$select.search} | filter:myCtrl.filterItemsFunc)">
                    {{myItem}}
                </ui-select-choices>
            </ui-select>
于 2015-07-01T15:19:16.647 に答える