<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="ui-bootstrap-custom-0.13.3.min.js"></script>
<script src="ui-bootstrap-custom-tpls-0.13.3.min.js"></script>
<script src="fsController.js"></script>
<script src="autofocus.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app='FilteringSelect' ng-controller='fsController as ctrl'>
<div class="col-sm-5">
<label>Filtering MultiSelect </label>
<div id="fsControl" class="bootstrap-select input-group">
<input type="text" autocomplete="off" name="my_select_label" class="form-control" ng-model="filterText" ng-keyup="act=true">
<input type="hidden" name="my_select" value="">
<div class="input-group-btn" ng-class="{open: act}">
<button tabindex="-1" type="button" class="btn btn-default dropdown-toggle" ng-class="{active: act}" ng-click="act = !act">
<span class="caret"></span>
</button>
<ul tabindex="-1" class="pull-right dropdown-menu" ng-blur="act = false" ng-mouseenter="ctrl.focus($event)">
<li ng-repeat="item in listItems | filter:filterText" ><a ng-click="ctrl.itemSelected(this, $event)">{{item.name}}</a></li>
</ul>
</div>
</div>
<!--<div collapse="isCollapsed">
<div class="well well-sm">-->
<ul class="list-group">
<li class="list-group-item" ng-repeat="selectedItem in selectedItems">
{{selectedItem.name}}
<button type="button" class="btn btn-danger btn-circle" style="margin-left:5px;" ng-click="ctrl.removeItem(this)">
<i class="glyphicon glyphicon-remove"></i>
</button>
</li>
</ul>
<!--</div>
</div>-->
</div>
</body>
</html>
.btn-circle {
width: 17px;
height: 16px;
text-align: center;
padding: 1px 0;
font-size: 0.7em; /*font-size: 8px;*/
line-height: 20px; /*line-height: 1.2;*/
border-radius: 10px;
-moz-border-radius: 10px;
}
.well .list-group .list-group-item{
float: left;
padding: 5px 7px;
}
.row{
margin-top:0;
margin-left: 1px;
margin-bottom:2px;
}
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
.btn-default {
background-image: none !important;
border-color: #ccc;
text-shadow: 0 1px 0 #fff;
height: 25px;
}
.form-control {
height:25px;
font-size: 12px;
}
.dropdown-menu{
position: absolute;
width: auto !important;
}
.dropdown-menu li a{
cursor: pointer;
}
.dropdown-menu li {
width:100%;
}
# AngularJs-FilteringMultiSelect
Filtering Multiselect Control using AngularJS & Bootstrap UI
A simple Filtering Select with the ability to select multiple values from the list and display them below the control.
You can remove the selection at any time by clicking the (x) button on the right of the control.
This control uses AngularJs & Bootstrap UI.
You can find it here: https://github.com/solonm/AngularJs-FilteringMultiSelect
See the demo here: http://embed.plnkr.co/U8rB5t/preview
(function () {
'use strict';
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout',
function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $element) {
$timeout(function () {
$element[0].focus();
});
}
};
}
]);
})();
/*
* angular-ui-bootstrap
* http://angular-ui.github.io/bootstrap/
* Version: 0.13.3 - 2015-08-09
* License: MIT
*/
angular.module("ui.bootstrap",["ui.bootstrap.collapse"]),angular.module("ui.bootstrap.collapse",[]).directive("collapse",["$animate",function(a){return{link:function(s,l,e){function o(){l.removeClass("collapse").addClass("collapsing").attr("aria-expanded",!0).attr("aria-hidden",!1),a.addClass(l,"in",{to:{height:l[0].scrollHeight+"px"}}).then(t)}function t(){l.removeClass("collapsing"),l.css({height:"auto"})}function i(){return l.hasClass("collapse")||l.hasClass("in")?(l.css({height:l[0].scrollHeight+"px"}).removeClass("collapse").addClass("collapsing").attr("aria-expanded",!1).attr("aria-hidden",!0),void a.removeClass(l,"in",{to:{height:"0"}}).then(n)):n()}function n(){l.css({height:"0"}),l.removeClass("collapsing"),l.addClass("collapse")}s.$watch(e.collapse,function(a){a?i():o()})}}}]);
/*
* angular-ui-bootstrap
* http://angular-ui.github.io/bootstrap/
* Version: 0.13.3 - 2015-08-09
* License: MIT
*/
angular.module("ui.bootstrap",["ui.bootstrap.tpls","ui.bootstrap.collapse"]),angular.module("ui.bootstrap.tpls",[]),angular.module("ui.bootstrap.collapse",[]).directive("collapse",["$animate",function(a){return{link:function(s,l,t){function o(){l.removeClass("collapse").addClass("collapsing").attr("aria-expanded",!0).attr("aria-hidden",!1),a.addClass(l,"in",{to:{height:l[0].scrollHeight+"px"}}).then(e)}function e(){l.removeClass("collapsing"),l.css({height:"auto"})}function i(){return l.hasClass("collapse")||l.hasClass("in")?(l.css({height:l[0].scrollHeight+"px"}).removeClass("collapse").addClass("collapsing").attr("aria-expanded",!1).attr("aria-hidden",!0),void a.removeClass(l,"in",{to:{height:"0"}}).then(n)):n()}function n(){l.css({height:"0"}),l.removeClass("collapsing"),l.addClass("collapse")}s.$watch(t.collapse,function(a){a?i():o()})}}}]);
[
{"name":"This is a test text 1","value":"1"},
{"name":"This is a test text 2","value":"2"},
{"name":"This is a test text 3","value":"3"},
{"name":"This is a test text 4","value":"4"},
{"name":"This is a test text 5","value":"5"}
]
angular.module('FilteringSelect',['ui.bootstrap.collapse']).controller('fsController', ['$http', '$scope', '$window', function($http, $scope, $window){
$scope.listItems = [];
$scope.selectedItems = [];
$scope.act = false;
$scope.isCollapsed = true;
var windowControl = angular.element($window);
windowControl.bind('resize', function () {
addNewStyle('.input-group-btn .dropdown-menu {width: '+document.body.querySelector(".bootstrap-select.input-group").clientWidth + "px !important"+'}');
});
$http.get("data.js")
.success(function(data) {
$scope.listItems = data;
})
.error(function(err){
console.log(err);
});
this.itemSelected = function(item, $event){
if(!containsObject(item.item, $scope.selectedItems)){
$scope.selectedItems.push(item.item);
}
$scope.act = false;
setTimeout(function(){
document.body.click();
}, 500);
$scope.isCollapsed = false;
};
this.removeItem = function(item){
for(i=0;i<$scope.selectedItems.length;i++){
if($scope.selectedItems[i].value == item.selectedItem.value){
$scope.selectedItems.splice(i, 1);
}
}
if($scope.selectedItems.length ==0){
$scope.isCollapsed =true;
}
};
function containsObject(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (list[i] === obj) {
return true;
}
}
return false;
};
this.focus = function($event){
$event.currentTarget.focus();
};
var addNewStyle = function (newStyle) {
var styleElement = document.getElementById('js_styles');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'js_styles';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.input-group-btn .dropdown-menu {width: '+document.body.querySelector(".bootstrap-select.input-group").clientWidth + "px !important"+'}');
}]);