JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-5-8 01:49:21

angular-ui-select

官方文档：github地址：https://github.com/angular-ui/ui-select

请大家多看文档

首先注意版本的问题，如果版本不对应，是会报非常多意想不到的错误的。

一：演示功能：支持下拉单选过滤。效果如下图：

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>

二：支持下拉多选过滤，效果展示：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>

备注：当你觉得你的需求还是没有满足的时候，建议你还是再刷一遍例子，文档

为啥会选择它呢，因为它就是满足了我的所有需求啊

我想这篇文章，不仅仅是想记录下来我做项目时遇到问题，查找资料，解决问题的过程。

我希望它可以在帮我解决问题的同时也能够帮助解决你们遇到的问题。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

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

浏览过的版块