angular-ui-select 下拉框支持过滤单选多选解决方案(系列一)

angular-ui-select 
官方文档:github地址:https://github.com/angular-ui/ui-select
请大家多看文档
 
 
首先注意版本的问题,如果版本不对应,是会报非常多意想不到的错误  的。
 一:演示功能:支持下拉单选过滤。效果如下图:
  angular-ui-select 下拉框支持过滤单选多选解决方案(系列一)_第1张图片

 栗子:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet">
head>

<body>
    <div>
        <div ng-app="app" ng-controller="ctrl">
            <ui-select ng-model="selected.value">
                <ui-select-match>
                    <span ng-bind="$select.selected.name"> {{$select.selected.name}}span>
                   
                ui-select-match>
                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">
                    <span ng-bind="item.name">span>
                ui-select-choices>
            ui-select>
            {{selected.value}}
        div>
    div>
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js">script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js">script>
    <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js">script>
    <script>
        angular.module('app', ['ui.select', 'ngSanitize'])
            .controller('ctrl', ['$scope', function ($scope) {

                $scope.itemArray = [
                    { id: 1, name: 'first' },
                    { id: 2, name: 'second' },
                    { id: 3, name: 'third' },
                    { id: 4, name: 'fourth' },
                    { id: 5, name: 'fifth' },
                ];

                $scope.selected = { value: $scope.itemArray[2] };
            }]);
    script>
body>

html>

适用场景:适用于第一次就把数据请求回来的场景,并且还适用于固定的几个下拉选项。

 多选的时候,注意两个点:

1.multiple
2.
 <ui-select ng-model="selected.value " multiple >
                <ui-select-match>
                    <span ng-bind="$item.name"> span>
                   
                ui-select-match>
                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">
                    <span ng-bind="item.name">span>
                ui-select-choices>
            ui-select>

 二:支持下拉多选过滤,效果展示:

angular-ui-select 下拉框支持过滤单选多选解决方案(系列一)_第2张图片

 

 完整代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet">
head>

<body>
    <div>
        <div ng-app="app" ng-controller="ctrl">
            <ui-select ng-model="selected.value " multiple >
                <ui-select-match>
                    <span ng-bind="$item.name"> span>
                   
                ui-select-match>
                <ui-select-choices  repeat="item in (itemArray | filter: $select.search) track by item.id">
                    <span ng-bind="item.name">span>
                ui-select-choices>
            ui-select>
            {{selected.value}}
        div>
    div>
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js">script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js">script>
    <script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js">script>
    <script>
        angular.module('app', ['ui.select', 'ngSanitize'])
            .controller('ctrl', ['$scope', function ($scope) {

                $scope.itemArray = [
                    { id: 1, name: 'first' },
                    { id: 2, name: 'second' },
                    { id: 3, name: 'third' },
                    { id: 4, name: 'fourth' },
                    { id: 5, name: 'fifth' },
                ];

                $scope.selected = { value: $scope.itemArray[2] };
            }]);
    script>
body>

html>

 

 

 

备注:当你觉得你的需求还是没有满足的时候,建议你还是再刷一遍例子,文档
为啥会选择它呢,因为它就是满足了我的所有需求啊
我想这篇文章,不仅仅是想记录下来我做项目时遇到问题,查找资料,解决问题的过程。
我希望它可以在帮我解决问题的同时也能够帮助解决你们遇到的问题。

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/DZzzz/p/10393688.html

你可能感兴趣的:(angular-ui-select 下拉框支持过滤单选多选解决方案(系列一))