angular-ui-select

发布时间：2020-12-17 07:13:13 所属栏目：安全来源：网络整理

导读：angular-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-

angular-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="multiple">
                <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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!