如何獲取在ui-select搜索框中輸入的值？

我正在使用ui-select（https://github.com/angular-ui/ui-select）。如何獲取在ui-select搜索框中輸入的值？

ui-select支持我們搜索，選擇和多選。但是，如何獲得在ui-select搜索框中鍵入的值用戶？如果輸入的用戶值不正確，我想顯示一條錯誤消息。

示例：在下面這個plunker與選擇二的主題，當用戶鍵入：「不要找到任何結果」 「asdasd」（本文不匹配任何結果）我想顯示一條消息通過分配給'scope.person.selected'

plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

我該怎麼做？

非常感謝！

來源

2015-10-07 Envy

如果我們使用$ select.search來獲得期望的結果，我們必須再次循環搜索。截至目前，比0.17.1版本時，我們可以用最簡單的解決方案：使用ui-select-no-choice

https://github.com/angular-ui/ui-select/wiki/ui-select-no-choice

感謝您的支持這麼多！

來源

2017-09-07 10:52:36 Envy

你可以使用angular-ui-bootstraps的typeahead來達到同樣的目的。這裏是pluncker鏈接http://plnkr.co/edit/gsJzdTZHiXZ6MrtTe4F3?p=preview

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
    <pre>Model: {{asyncSelected | json}}</pre> 
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control"> 
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
    <div ng-show="noResults"> 
     <i class="glyphicon glyphicon-remove"></i> No Results Found 
    </div> 
</div>

來源

2015-10-13 05:30:45 SaiGiridhar

謝謝。但我在許多情況下在我的項目中使用了ui-select。改變插件對我來說太複雜了...... – Envy

您可以使用ng-keypress="fn($select.search)" at <ui-select...>
，利用此功能，在控制器來獲得輸入。

$scope.fn = function(search) { 
//do something with search 
}

來源

2016-01-26 09:12:21

您可以在<ui-select...>

來源

2016-10-11 19:37:13 joaosavio

在angular_ui_select進入$select.search model也使用ng-init="setSelect($select)"輸入數據。您可以使用ui-select-choice的刷新屬性。只需通過refresh="test($select.search)"中的函數，並分別使用refresh-delay和minimum-input-length屬性設置延遲和最小輸入長度。這裏是一個簡單的例子：

<ui-select ng-model="model" theme="theme"> 
    <ui-select-match>{{data}}</ui-select-match> 
    <ui-select-choices repeat="options in data" refresh="yourFunction($select.search)" refresh-delay="100" minimum-input-length="1"></ui-select-choices>  
</ui-select>

我建議你去通過的文件，希望這將有助於。 angular-ui-select

來源

2017-04-19 11:30:59

您可以通過創建自定義過濾器來完成此操作。在這個例子中， 'uppercasetr'是自定義過濾器。

<ui-select ng-model="vm.mc" theme="select2" limit="10"> 
    <ui-select-match placeholder="Country...">{{$select.selected.SectionTitle}}</ui-select-match> 
    <ui-select-choices repeat="item in vm.data | propsFilter:{SectionTitle : ($select.search | uppercasetr)} | limitTo:$select.limit"> 
     <div ng-bind-html="(item.SectionTitle) | highlight: $select.search"></div> 
     <small> 
      <b>Country:</b> {{item.SectionValue1}} 
     </small> 
    </ui-select-choices> 
</ui-select>

來源

2017-04-24 07:23:26

如何獲取在ui-select搜索框中輸入的值？

回答

相關問題