Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.css"/>
</head>
<body>
   
    <div ng-controller="MainController as mainCtrl">
        <span class="btn btn-info" ng-click="mainCtrl.openModal()">Open</span>
​
​
​
​
    </div>
​
​
​
    
    
    <script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.6/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
​
​
​
​
    <script type="text/ng-template" id="myModalContent.html">
        <div class="panel panel-default" uib-modal-dragging>
            <div class="panel-heading">drag header to move</div>
            <div class="panel-body">
                <p>select1</p>
                <ui-select ng-model="selected.value">
                    <ui-select-match>
                        <span ng-bind="$select.selected.name"></span>
                    </ui-select-match>
                    <ui-select-choices repeat="item in myModalCtrl.itemArray">
                        <span ng-bind="item.name"></span>
                    </ui-select-choices>
​
​
​
​
                </ui-select>
​
​
                <p>select2</p>
                <ui-select ng-model="selected.value2">
                    <ui-select-match>
                        <span ng-bind="$select.selected.name"></span>
                    </ui-select-match>
                    <ui-select-choices repeat="item in myModalCtrl.itemArray">
                        <span ng-bind="item.name"></span>
                    </ui-select-choices>
​
​
​
​
                </ui-select>
            </div>
        </div>
​
    </script>
​
</body>
</html>
​
 
(function () {
    'use strict';
​
    var myApp = angular.module('myApp', [
        'ngAnimate',
        'ngSanitize',
        'ui.bootstrap',
        'ui.select'
    ]);
​
​
    myApp.controller('MainController', [
        '$uibModal',
        MainController
    ]);
​
​
    function MainController($uibModal) {
        var ctrl = this;
​
        var uibModalOptions = {
            animation: true,
            templateUrl: 'myModalContent.html',
            windowClass: '',
            size: 'sm',
            controller: MyModalController,
            controllerAs: 'myModalCtrl'
​
        };
​
        ctrl.openModal = openModal;
​
​
​
        function openModal() {
            var uibInstance = $uibModal.open(uibModalOptions);
​
        }
​
    }
​
    function MyModalController() {
        var ctrl = this;
        ctrl.itemArray = [
            {id: 1, name: 'first'},
            {id: 2, name: 'second'},
            {id: 3, name: 'third'},
            {id: 4, name: 'fourth'},
            {id: 5, name: 'fifth'}
        ];
​
​
    }
​
​
    angular.module('myApp').directive('uibModalDragging',
        [
            UibModalDragging
        ]);
​
​
    function UibModalDragging() {
        return {
            restrict: 'A',
            scope: false,
​
            link: function (scope, iElem, iAttrs) {
                $(iElem).closest('.modal-content').draggable({
                        handler: '.panel-heading',
                        start: onStart
                    }
                )
            }
​
        };
​
​
        function onStart() {
            //close all ui-select
        }
​
​
    }
​
​
})();
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers