如何获取在 ui-select 搜索框中输入的值?
How to get value which typed in ui-select search box?
我正在使用 ui-select (https://github.com/angular-ui/ui-select)。
ui-select 支持我们搜索、Select 和多select。但是我怎样才能得到用户在 ui-select 搜索框中输入的值呢?如果用户键入的值不正确,我想显示一条错误消息。
示例:在下面这个带有 Select2 主题的 plunker 中,当用户键入:'asdasd'(此文本与任何结果都不匹配)我想通过分配给 'scope.person.selected'
来显示消息 "Do not find any results!"
plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
我该怎么做?
非常感谢!
您可以使用 angular-ui-bootstraps 的 typeahead 来达到同样的目的。这里是 pluncker link 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>
您可以使用ng-keypress="fn($select.search)" at <ui-select...>
并在控制器上使用此功能来获取输入。
$scope.fn = function(search) {
//do something with search
}
您也可以在 <ui-select...>
使用 ng-init="setSelect($select)"
angular_ui_select 中的输入数据进入 $select.search model
。
您可以使用 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
您可以通过创建自定义过滤器来做到这一点。如本例所示; '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>
如果我们使用 $select.search 来得到预期的结果,我们必须再次循环搜索。到现在,版本大于0.17.1,我们可以使用最简单的解决方案:使用ui-select-no-choice
https://github.com/angular-ui/ui-select/wiki/ui-select-no-choice
非常感谢您的支持!
我正在使用 ui-select (https://github.com/angular-ui/ui-select)。
ui-select 支持我们搜索、Select 和多select。但是我怎样才能得到用户在 ui-select 搜索框中输入的值呢?如果用户键入的值不正确,我想显示一条错误消息。
示例:在下面这个带有 Select2 主题的 plunker 中,当用户键入:'asdasd'(此文本与任何结果都不匹配)我想通过分配给 'scope.person.selected'
来显示消息 "Do not find any results!"plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
我该怎么做?
非常感谢!
您可以使用 angular-ui-bootstraps 的 typeahead 来达到同样的目的。这里是 pluncker link 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>
您可以使用ng-keypress="fn($select.search)" at <ui-select...>
并在控制器上使用此功能来获取输入。
$scope.fn = function(search) {
//do something with search
}
您也可以在 <ui-select...>
ng-init="setSelect($select)"
angular_ui_select 中的输入数据进入 $select.search model
。
您可以使用 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
您可以通过创建自定义过滤器来做到这一点。如本例所示; '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>
如果我们使用 $select.search 来得到预期的结果,我们必须再次循环搜索。到现在,版本大于0.17.1,我们可以使用最简单的解决方案:使用ui-select-no-choice
https://github.com/angular-ui/ui-select/wiki/ui-select-no-choice
非常感谢您的支持!