Реализация компонента списка выбора со ссылочным примером jsfiddle не отображает его - PullRequest
Новая
       38

Реализация компонента списка выбора со ссылочным примером jsfiddle не отображает его

0 голосов
/ 21 апреля 2020

Я хочу реализовать список выбора в angularJS из справочного примера. https://jsfiddle.net/awolf2904/qkksz6vj/

У моего приложения есть страница jsp, на которой я буду sh отображать ее.

Теперь вот мой jsp. 

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
    function preventBack() {
        window.history.forward();
    }
    setTimeout("preventBack()", 0);
    window.onunload = function() {
        null
    };
</script>

<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload director To Department</title>
<meta name="description" content="Srikandi Responsive Admin Templates" />
<meta name="keywords"
    content="resposinve, admin dashboard, admin page, admin template" />
<meta name="author" content="Candra Dwi Waskito" />
<link rel="stylesheet"
    href="${pageContext.request.contextPath}/css/custom/picklist.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <!-- start:breadcrumb -->
            <ol class="breadcrumb">
                <li><a
                    href="${pageContext.request.contextPath}/manager/manaDashBoard">Home</a></li>
                <c:if test="${not empty helperTeam}">
                    <li><a
                        href="${pageContext.request.contextPath}/manager/managerCreateTeam">Create
                            Team</a></li>
                    <!-- Commented this because manager should not select other teams after creating a new team  -->
                    <%-- <li><a
                        href="${pageContext.request.contextPath}/manager/selectTeam">Select
                            Team</a></li> --%>
                    <li><a
                        href="${pageContext.request.contextPath}/manager/seletedTeamName?teamName=${teamName}">Manage
                            The Team</a></li>
                </c:if>
                <li class="active">Upload the Employee to the Team</li>
            </ol>
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="page-header">Select Employee to the Team</h2>
                </div>
            </div>
            <section class="panel">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            Select Employee from available to selected to Add: <strong>
                                ${teamName} </strong>
                        </h3>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <br>
                            <div class="container" ng-app="demoApp"
                                ng-controller="mainController as mainCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">PickList Demo</h3>
                                    </div>
                                    <div class="panel-body">

                                        <!--<div id="pickList"></div>-->
                                        <pick-list options="mainCtrl.options"
                                            result="mainCtrl.resultList"></pick-list>
                                        MainController resultList = {{mainCtrl.resultList}} <br>
                                        <br>
                                        <button class="btn btn-primary" id="getSelected"
                                            ng-click="mainCtrl.alert(mainCtrl.resultList)">Get
                                            Selected</button>
                                    </div>
                                </div>

                                <script type="text/ng-template" id="component/pickListTmpl.html">
    <div class="row">
        <div class="col-sm-5">
            <select class="form-control pickListSelect" id="pickData" multiple ng-model="pickListSelect" ng-options="data as data.text for data in options.data track by data.id">      
            </select>
        </div>
        {{pickListSelect}}
        <div class="col-sm-2 pickListButtons">
            <button ng-click="add()" class="btn btn-primary btn-sm">add</button>
            <button ng-click="addAll()" class="btn btn-primary btn-sm">add all</button>
            <button ng-click="remove()" class="btn btn-primary btn-sm">
            remove
            </button>
            <button ng-click="removeAll()" class="btn btn-primary btn-sm">remove all
            </button>   
        </div>
        <div class="col-sm-5">
        <select class="form-control pickListSelect" id="pickListResult" multiple ng-model="pickListResultSelect" ng-options="data as data.text for data in result.data track by data.id">
        </select>
        </div>
    </div>
  </script>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>
<script
    src="${pageContext.request.contextPath}/js/customJS/addEmployeeToTeamViaPickList.js"></script>
</html>

My JS для angular приложения 

angular.module('demoApp', ['aw-picklist'])
    .controller('mainController', mainController);

angular.module('aw-picklist', [])
    .directive('pickList', PickList);

// jquery multiselect data format
// static data for demo
var val = {
  01: {
    id: 01,
    text: 'Isis'
  },
  02: {
    id: 02,
    text: 'Sophia'
  },
  03: {
    id: 03,
    text: 'Alice'
  },
  04: {
    id: 04,
    text: 'Isabella'
  },
  05: {
    id: 05,
    text: 'Manuela'
  },
  06: {
    id: 06,
    text: 'Laura'
  },
  07: {
    id: 07,
    text: 'Luiza'
  },
  08: {
    id: 08,
    text: 'Valentina'
  },
  09: {
    id: 09,
    text: 'Giovanna'
  },
  10: {
    id: 10,
    text: 'Maria Eduarda'
  },
  11: {
    id: 11,
    text: 'Helena'
  },
  12: {
    id: 12,
    text: 'Beatriz'
  },
  13: {
    id: 13,
    text: 'Maria Luiza'
  },
  14: {
    id: 14,
    text: 'Lara'
  },
  15: {
    id: 15,
    text: 'Julia'
  }
};

function mainController($window) {
    var vm = this;
    vm.options = {
        data: val
    };
    vm.resultList = {
    };
    vm.alert = function(result) {
        $window.alert(JSON.stringify(result));
    };
}

function PickList() {
    var defaults = {};

    return {
        scope: {
            options: '=',
            result: '='
        },
        templateUrl: 'component/pickListTmpl.html',
        link: function(scope, element, attrs) {

            var opts = angular.extend({}, defaults, scope.options);

            //var $el = $(element).multiselect(opts); // jquery plugin not required

            function copy(pickListSelect, source, target) {
                // add data to new list
                var i, id;
                // copy to new lsit & remove old element
                for(i=0; i< pickListSelect.length; i++) {
                    id=pickListSelect[i].id;
                    target.data[id] = target.data[id] || {};
                    angular.extend(target.data[id], pickListSelect[i]);

                    delete source.data[pickListSelect[i].id];
                }

                pickListSelect = [];
            }

            angular.extend(scope, {
                pickListSelect: [],
                pickListResultSelect: [],
                result: {
                    data: {}
                },
                add: function() {
                    var id;
                    // copy(selection, source, target)
                    copy(scope.pickListSelect, scope.options, scope.result);
                },
                addAll: function() {
                    angular.merge(scope.result.data, scope.options.data);
                    scope.options.data = {};
                },
                remove: function() {
                    copy(scope.pickListResultSelect, scope.result, scope.options);
                },
                removeAll: function() {
                    angular.merge(scope.options.data, scope.result.data);
                    scope.result.data = {};
                }
            });
        }
    };
}

и CSS для списка выбора 

@charset "ISO-8859-1";

.pickListButtons {
    padding: 10px;
    text-align: center;
}

.pickListButtons button {
    margin-bottom: 5px;
}

.pickListSelect {
    height: 200px !important;
}

Когда я использую отладчик, директива выбора не является за работой. в то время как основной контроллер работает нормально.

Информация о версии стека: - 1. AngularJS: 1.2.26 2. Bootstrap: 3.1.1 3. Jquery: 1.11.1 4. Apache плитки: 2.2.2

...