anguar-select2

Posted 2020-10-25 井凉一一

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了anguar-select2相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../plugins/bootstrap3.3.0/css/bootstrap.min.css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    </head>
    <body ng-controller="mainCtrol">
    <select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 300px;">
        <!--<option selected="selected">orange</option>-->
        <!--<option>white</option>-->
        <!--<option selected="selected">purple</option>-->
    </select>


        <script type="text/javascript" src="../plugins/angular1.5.8/angular.min.js"></script>
        <script type="text/javascript" src="../plugins/jquery1.10.2/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../plugins/bootstrap3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <script type="text/javascript">
            var App = angular.module(\'App\', []);
            App.controller(\'mainCtrol\', [\'$scope\', function($scope) {
                $(document).ready(function() {
                    var data = [
                        {
                            id: 0,
                            text: \'enhancement\'
                        },
                        {
                            id: 1,
                            text: \'bug\',
                            selected: true
                        },
                        {
                            id: 2,
                            text: \'duplicate\'
                        },
                        {
                            id: 3,
                            text: \'invalid\'
                        },
                        {
                            id: 4,
                            text: \'wontfix\'
                        }
                    ];
                    var mySelect2 = $(\'.js-example-basic-multiple\').select2({
                        data: data,
                        placeholder: \'This is my placeholder\',
                        maximumSelectionLength: 5,
                        tags: true,
                        tokenSeparators: [\',\', \' \'],
                        allowClear: true
//                        templateSelection: formatState
                    });

                    $(\'.js-example-basic-multiple\').on(\'select2:select\', function (e) {
                        var arr = mySelect2[0].selectedOptions;
                        var arr_res = [];
                        for (var i = 0, len = arr.length; i < len; i++) {
                            arr_res.push(Number(arr[i].value));
                        }
                        console.log(arr_res);
                    });

                    function formatState(state){
//                        console.log(state);
//                        if (!state.id) {
//                            return state.text;
                            return state.text;
//                        }
//                        var $state = $(
//                            \'<span>\' + state.text + \'</span>\'
//                        );
//                        return $state;
                    }
                });
            }]);
        </script>
    </body>
</html>

以上是关于anguar-select2的主要内容，如果未能解决你的问题，请参考以下文章

为啥代码片段在 matplotlib 2.0.2 上运行良好，但在 matplotlib 2.1.0 上引发错误

web代码片段

sublime text3 增加代码片段(snipper)

JS常用代码片段2-值得收藏

JavaScript 代码片段