Skip to content

Instantly share code, notes, and snippets.

@CarterTsai
Created November 9, 2013 16:06
Show Gist options
  • Save CarterTsai/7386919 to your computer and use it in GitHub Desktop.
Save CarterTsai/7386919 to your computer and use it in GitHub Desktop.
A Pen by CarterTsai.
<div ng-app="MyApp" ng-controller="Ctrl">
<cc-Select select="select" ng-model="options"> </cc-Select>
<h3>your choice is {{select.msg}}</h3>
<div ng-repeat="d in options | from: 0 | limitTo: 3 track by d.id"> {{d.msg}} </div>
</div>
var app = angular.module('MyApp', []);
function Ctrl($scope) {
$scope.select = '123';
$scope.options = [
{id:"1", msg:"Hello"},
{id:"2", msg:"World"},
{id:"3", msg:"Good" },
{id:"4", msg: "2MO" },
{id:"5", msg: "CCC" }];
}
app.directive('ccSelect', function() {
return {
restrict: 'AEC',
require: ['^select', '^ngModel'],
transclude: true,
scope: {
ngModel: "=",
select: "=",
},
template: '<label><select ng-model="select" ng-options="c.msg for c in ngModel"><option value="">-- choose message --</option></select></label>',
controller: ['$scope', function($scope) {
}],
}
});
app.filter('from', function() {
return function(data, from) {
return data.slice(parseInt(from));
}
});
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
font-size: 25px;
}
label {position:relative}
label:after {
content:'<>';
font:25px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:-10px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:6px; top:0px;
width:20px; height:20px;
background:#f8f8f8;
position:absolute;
pointer-events:none;
display:block;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:100px}
}
option {
border: 1px solid #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment