1

私は ui-select を使用しています。Enter キーを押して検索結果を選択すると、結果が選択され、フォームが直接送信されます。私はそれを理解できません、何が問題なのですか。

ここに私が使用しているHTMLがあります

<form>
    <div class="form-group">
        <label class="col-sm-3 control-label">Address</label>
        <div class="col-sm-5">
            <input type="text" ng-model="address.street" class="form-control"  placeholder="e.g. NUST Campus, H-12">        
            <div class="form_wrapper_error">
                <p ng-show='addressError'>{{addressError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">City/Town</label>
        <div class="col-sm-5">
            <!-- <location-autocomplete bind-value="address.city" coordinates="cityAddInitialCoordinates" placeholder="e.g. Islamabad"> -->
            <ui-select ng-model="$parent.address.city"
                theme="select2"
                reset-search-input="true"
                title="Select City">
                <ui-select-match allow-clear="true" placeholder="Select City">{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="city as city in cities track by $index"
                    refresh="refreshLocation($select.search)"
                    refresh-delay="0">
                    <div ng-bind-html="city | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            <div class="form_wrapper_error">
                <p ng-show='cityError'>{{cityError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Zip</label>
        <div class="col-sm-5">
            <input type="text"  ng-model="address.zip" class="form-control"  placeholder="e.g. 44000">
            <div class="form_wrapper_error">
                <p ng-show='zipError'>{{zipError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <button class="btn btn-primary buttt" ng-click="addAddress()">Add Address</button>
        </div>
    </div>
</form>
4

2 に答える 2

0

誰かがまだこの問題に苦労している場合は、解決策\回避策を見つけました. 次のように ui-selectに追加skip-focusser="true"します。

<ui-select ng-model="$parent.ngModel" theme="bootstrap" class="input-xs" skip-focusser="true">
<ui-select-match >{{$select.selected.description}}</ui-select-match>
<ui-select-choices repeat="item in options | orderBy :'code' | filter: $select.search">
   <div ng-bind-html="item.description | highlight: $select.search"></div>
</ui-select-choices>

これにより、選択要素からフォーカスが削除されるため、Enter キーを押してもドロップダウン メニューが再度開かれません。

于 2020-10-12T10:49:34.313 に答える