(function(){
var MD_CHIPS_SELECT_TEMPLATE = '\
<md-chips-wrap class="md-chips-select" ng-class="{ \'md-focused\': isFocused() }"> \
<md-chip ng-repeat="chip in mdChipItems" class="md-chip"> \
<span class="md-chip-content">{{chip.mainTitle}} </span>\
<button class="md-remove" ng-click="removeFromChips(chip)"> \
<span class="remove"> \
<svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"><g><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path></g></svg> \
</span> \
</button> \
</md-chip>\
<div class="md-chip-input-container"> \
<input type="text" \ class="chips-input" \
ng-focus="onInputFocus($event)" \
ng-model="chipInput" \
ng-blur="onInputBlur()" \
ng-keydown="onKeyDown($event)" />\
</md-chip-input-container> \
</div> \
<md-select-list ng-show="selectActive" ng-style="{top: ytop, left: xleft}"> \
<md-select-item-wrapper ng-repeat="item in mdSelectItems" ng-class="{\'active\': !isInChips(item)}" ng-show="inputQuery(item)" ng-click="toggleItem(item)"> \
<md-select-item-title>{{item.mainTitle}}</md-select-item-title> \
<span ng-show="!isInChips(item)" style="float:right; margin-right:20px;"> \
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"> \
<path d=\"M0 0h24v24h-24z\" fill=\"none\"/> \
<path d=\"M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z\"/> \
</svg> \
</span> \
</md-select-item-wrapper> \
</md-select-list> \
</md-chips-wrap>';
var MD_CHIPS_SELECTBOX_TEMPLATE = '\
<md-select-list ng-show="selectActive" class="ng-hide-add" ng-style="{top: ytop, left: xleft}"> \
<md-select-item-wrapper ng-repeat="item in mdSelectItems" ng-class="{\'active\': !isInChips($index)}"/*ng-show="isInChips($index)" */ng-click="toggleItem($index)"> \
<md-select-item-title >{{item.mainTitle}}</md-select-item-title> \
<span> \
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> \
<path d=\"M0 0h24v24h-24z\" fill=\"none\"/> \
<path d=\"M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z\"/> \
</svg> \
</span> \
</md-select-item-wrapper> \
</md-select-list>';
angular.module('md.chips.select', [])
.service("mdItems", function(){
})
.directive('mdChipsSelect', ["$document", "$compile", "$log", "$timeout", function($document, $compile, $log, $timeout){
return {
restrict: 'E',
replace: false,
controller: "mdChipsCtrl",
template: function(element, attrs) {
return MD_CHIPS_SELECT_TEMPLATE;
},
require: "?ngModel",
scope: {
ngModel: '=',
selectItems: '=',
mainTitle: '@'
},
link: function (scope, element, attrs) {
scope.mdChipItems = scope.ngModel;
scope.mdSelectItems = scope.selectItems;
if(scope.mainTitle == null) {
scope.mainTitle = "title";
}
var subString = scope.mainTitle.split(' ');
angular.forEach(scope.mdChipItems, function(obj, key){
obj.mainTitle = '';
angular.forEach(subString, function(field, fkey){
if(obj[field]!=null){
obj.mainTitle += obj[field].toString();
obj.mainTitle += ' ';
}
});
});
angular.forEach(scope.mdSelectItems, function(obj, key){
obj.mainTitle = '';
angular.forEach(subString, function(field, fkey){
if(obj[field]!=null){
obj.mainTitle += obj[field].toString();
obj.mainTitle += ' ';
}
});
});
$document.bind('click', function(e){
var clicked = e.target.nodeName;
if(e.target.nodeName != "MD-SELECT-ITEM-WRAPPER"
&& e.target.nodeName != "MD-SELECT-ITEM-TITLE"
&& e.target.nodeName != "INPUT"
&& e.target.nodeName != "MD-ICON"
&& (e.target.nodeName != "SPAN" || e.target.attributes.getNamedItem("class").value.indexOf("md-chip-content") == -1)
&& (e.target.nodeName != "SPAN" || e.target.attributes.getNamedItem("class").value.indexOf("remove") == -1)
){
$timeout(function(){
// Close select panel
scope.selectActive=false;
}, 0)
}
});
scope.onInputFocus = function(event){
scope.ytop = (event.currentTarget.offsetTop+35) +'px';
scope.xleft = (event.currentTarget.offsetLeft) + 'px';
scope.selectActive = true;
scope.focus = true;
}
scope.onInputBlur = function(){
scope.focus = false;
}
scope.isFocused = function(){
return scope.focus;
}
scope.onKeyDown = function(e) {
if(e.which==13) { //Enter
if(scope.chipInput && scope.chipInput != "" && scope.ngModel.indexOf(scope.chipInput) == -1)
this.ngModel.push(scope.chipInput)
scope.chipInput = "";
}
else if(e.which == 8){
if (scope.chipInput == null || scope.chipInput == ""){
this.ngModel.pop();
}
}
}
scope.removeFromChips = function(item){
var chipIndex = scope.ngModel.indexOf(item);
scope.ngModel.splice(chipIndex, 1);
}
scope.isSelectActive = function(){
return scope.selectActive;
}
scope.addToChips = function(obj){
scope.ngModel.push(obj);
scope.chipInput = "";
scope.chipInput.focus=true;
}
scope.toggleItem = function(item) {
var chipIndex = scope.ngModel.indexOf(item);
console.log(scope.ngModel);
console.log(item);
console.log(chipIndex);
if( chipIndex != -1) {
scope.removeFromChips(item);
} else {
scope.addToChips(item);
}
}
scope.isInChips = function(item) {
return scope.ngModel.indexOf(item) == -1;
}
scope.inputQuery = function(item) {
if(!scope.chipInput ||
scope.chipInput == "" || angular.lowercase(item.mainTitle).indexOf(angular.lowercase(scope.chipInput))!=-1)
return true;
else
return false;
}
}
}
}])
.controller("mdChipsCtrl", ['$scope', function($scope){
$scope.focus = false;
$scope.selectActive = false;
$scope.mdChipItems = [];
$scope.mdSelectItems = [];
$scope.currentMdSelectItems = [];
$scope.ytop = 0;
$scope.xleft = 0;
}])
})();
(function() {
var demoApp = angular.module("demoapp", ['ngAnimate', 'md.chips.select']);
demoApp.controller('mainCtrl', ["$scope", function($scope) {
console.log("Controller initializing...");
}]);
demoApp.controller('chipsCtrl', ["$scope", function($scope) {
$scope.fruitNames = ["Apple"];
}]);
demoApp.controller('chipsSelectCtrl', ["$scope", function($scope) {
$scope.sItems = [{
name: "Mini Cooper",
id: 0
}, {
name: "Lexus IS250",
id: 1
}, {
name: "Ford F150",
id: 2
}, {
name: "Toyota Prius",
id: 3
}, {
name: "Porsche 911",
id: 4
}, {
name: "Ferreri 488",
id: 5
}];
$scope.myItems = [$scope.sItems[4], $scope.sItems[5]];
}]);
demoApp.controller('cChipsSelectCtrl', ["$scope", "$timeout", function($scope, $timeout) {
$scope.selectedCoutries = [];
$scope.countiesList = [{
country: "Taiwan",
id: 0
}, {
country: "United States",
id: 1
}, {
country: "United Kingdom",
id: 2
}, {
country: "Hong Kong",
id: 3
}];
$timeout(function() {
console.log("Set focus");
angular.element(".chips-input")[0].focus();
}, 500);
}]);
})();
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.ng-hide-add {
-webkit-animation:0.5s fadeOut ease;
animation:0.5s fadeOut ease;
}
.ng-hide-remove {
-webkit-animation:0.5s fadeIn ease;
animation:0.5s fadeIn ease;
}
.md-chips-select{
box-shadow:0 1px #e0e0e0;
}
.md-chips-select.md-focused {
box-shadow: 0 2px rgb(63, 81, 181);
}
md-chips-select .md-chip {
background: #e0e0e0;
color: #424242;
}
.md-chips-select {
display: block;
font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;
font-size: 13px;
padding: 0 0 8px 0;
vertical-align: middle;
cursor: text; }
.md-chips-select:after {
content: '';
display: table;
clear: both; }
.md-chips-select .md-chip {
cursor: default;
border-radius: 16px;
display: block;
height: 32px;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0 8px 0 12px;
float: left; }
.md-chips-select .md-chip .md-chip-content {
display: block;
padding-right: 4px;
float: left;
white-space: nowrap; }
.md-chips-select .md-chip .md-chip-content:focus {
outline: none; }
.md-chips-select .md-chip .md-chip-remove-container {
display: inline-block;
margin-right: -5px; }
.md-chips-select .md-chip .md-chip-remove {
text-align: center;
width: 32px;
height: 32px;
min-width: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
position: relative; }
.md-chips-select .md-chip .md-chip-remove md-icon {
height: 18px;
width: 18px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); }
.md-chips-select .md-chip-input-container {
display: block;
line-height: 32px;
margin: 8px 8px 0 0;
padding: 0 8px 0 12px;
float: left; }
.md-chips-select .md-chip-input-container input:not([type]), .md-chips-select .md-chip-input-container input[type="email"], .md-chips-select .md-chip-input-container input[type="number"], .md-chips-select .md-chip-input-container input[type="tel"], .md-chips-select .md-chip-input-container input[type="url"], .md-chips-select .md-chip-input-container input[type="text"] {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips-select .md-chip-input-container input:not([type]):focus, .md-chips-select .md-chip-input-container input[type="email"]:focus, .md-chips-select .md-chip-input-container input[type="number"]:focus, .md-chips-select .md-chip-input-container input[type="tel"]:focus, .md-chips-select .md-chip-input-container input[type="url"]:focus, .md-chips-select .md-chip-input-container input[type="text"]:focus {
outline: none; }
.md-chips-select .md-chip-input-container md-autocomplete, .md-chips-select .md-chip-input-container md-autocomplete-wrap {
background: transparent;
height: 32px; }
.md-chips-select .md-chip-input-container md-autocomplete md-autocomplete-wrap {
box-shadow: none; }
.md-chips-select .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips-select .md-chip-input-container input {
border: 0;
height: 32px;
line-height: 32px;
padding: 0; }
.md-chips-select .md-chip-input-container input:focus {
outline: none; }
.md-chips-select .md-chip-input-container md-autocomplete, .md-chips-select .md-chip-input-container md-autocomplete-wrap {
height: 32px; }
.md-chips-select .md-chip-input-container md-autocomplete {
box-shadow: none; }
.md-chips-select .md-chip-input-container md-autocomplete input {
position: relative; }
.md-chips-select .md-chip-input-container:not(:first-child) {
margin: 8px 8px 0 0; }
.md-chips-select .md-chip-input-container input {
background: transparent;
border-width: 0; }
.md-chips-select md-autocomplete button {
display: none; }
@media screen and (-ms-high-contrast: active) {
.md-chip-input-container, md-chip {
border: 1px solid #fff; }
.md-chip-input-container md-autocomplete {
border: none; } }
md-select-list {
max-height: 220px;
overflow: auto;
position: absolute;
width:300px;
background: white;
box-shadow: 0px 0.5px 4px 0px rgba(1,1,1,0.3);
display:block;
}
md-select-list::-webkit-scrollbar {
width: 7px;
}
md-select-list::-webkit-scrollbar-track {
background-color: transparent;
}
md-select-list::-webkit-scrollbar-thumb {
background-color: rgba(200,200,200, 0.5);
opacity: 0.5;
border-radius: 5px;
}
md-select-list::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
md-select-item-wrapper {
height: 27px;
font-size:15px;
line-height: 2em;
padding: 3px 10px;
font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif;
font-weight: 300;
color: #505050;
border-bottom: 1px solid #e7e7e7;
text-overflow: ellipsis;
overflow: hidden;
display:block;
cursor: pointer;
}
md-select-item-wrapper.active {
color: #def1f0;
background-color: #009788;
}
.md-remove {
height: 32px;
width: 32px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
margin: 0;
position: relative;
}
.remove {
height: 18px;
width: 18px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<html ng-App="demoapp">
<head>
<title>NgApp</title>
</head>
<body ng-controller="mainCtrl">
<div class="row">
<div ng-controller="chipsSelectCtrl">
<span>You have selected: {{myItems}} </span>
<md-chips-select ng-model="myItems" select-items="sItems" main-title="name"></md-chips-select>
</div>
</div>
<div class="row" style="margin-top:60px;">
<div ng-controller="cChipsSelectCtrl">
\t \t <span>Where have you been: {{selectedCoutries}} </span>
\t \t <md-chips-select ng-model="selectedCoutries" select-items="countiesList" main-title="country id"></md-chips-select>
</div>
</div>
</body>
</html>
感謝がたくさんの作品！私はそれをそうは見なかった：o;私はちょうどcodepen設定があることを考え出しました... –