A Pen by CarterTsai.

AngularJs-Select.markdown

AngularJs Select

A Pen by CarterTsai on CodePen.

License.

index.html

<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>

script.js

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));
    }
});

style.css

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;
}