angularjs cordova ionic-framework cordova-plugins

Why select is so ugly ? Can I customize it?

I've been satisfied using Ionic but now when I've tried to use select element, it has a very strange appearence, at least on Android devices. It looks like this:

It's very ugly! There is a way to customize this appearence, or implement another thing instead of select, which is more beautiful?

Thanks in advance,

Solution

For your Reference See this Link ,and also pasting the code incase for Future Users. HTMl

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="ionicApp" ng-controller="MainCtrl">

    <ion-nav-view></ion-nav-view>

    <script id="templates/event-menu.html" type="text/ng-template">
      <ion-side-menus enable-menu-with-back-views="false">

        <ion-side-menu-content>
          <ion-nav-bar class="bar-positive">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>

          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content> 

        <ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          <ion-content>
          </ion-content>
        </ion-side-menu>

      </ion-side-menus>
    </script>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Directive to Select multiple options">
        <ion-content scroll="false">
          <ion-multiple-select title="Select Users" options="users" key-property="id" value-property="name" selected-property="selected" class="item item-input item-icon-right">
            <div class="input-label">
              User
            </div>
            <i class="icon ion-android-arrow-dropdown"></i>
          </ion-multiple-select>
          <textarea class="padding" disabled="disabled">{{ getOptionsSelected(users, 'name', 'selected') }}</textarea>
          <ion-multiple-select title="Select Groups" template-url="templates/multipleSelect.html" options="groups" key-property="Id" value-property="Name" selected-property="Selected" class="item item-input item-icon-right" render-checkbox="false" animation="slide-in-left">
            <div class="input-label">
              Group
            </div>
            <i class="icon ion-android-arrow-dropdown"></i>
          </ion-multiple-select>
          <textarea class="padding" disabled="disabled">{{ getOptionsSelected(groups, 'Name', 'Selected') }}</textarea>
        </ion-content>
      </ion-view>
    </script>
    <script id="templates/multipleSelect.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar align-title="center">
            <button class="button button-clear button-icon ion-close" ng-click="closeModal();"></button>
            <h1 class="title">{{multipleSelect.title}}</h1>
            <button class="button button-clear button-icon ion-checkmark" ng-click="saveOptions();"></button>
        </ion-header-bar>
        <ion-content scroll="false">
            <ul class="list">
                <li class="item item-toggle" ng-repeat="option in multipleSelect.tempOptions" ng-if="!multipleSelect.renderCheckbox">
                    {{ option[multipleSelect.valueProperty] }}
                    <label class="toggle toggle-assertive">
                        <input type="checkbox" ng-model="option[multipleSelect.selectedProperty]">
                        <div class="track">
                            <div class="handle"></div>
                        </div>
                    </label>
                </li>
                <li class="item item-checkbox" ng-repeat="option in multipleSelect.tempOptions" ng-if="multipleSelect.renderCheckbox">
                   <label class="checkbox">
                     <input type="checkbox" ng-model="option[multipleSelect.selectedProperty]">
                   </label>
                   {{ option[multipleSelect.valueProperty] }}
                </li>
            </ul>
        </ion-content>
    </ion-modal-view>
    </script>
  </body>
</html>

CSS

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

textarea{
  width: 100%;
    height: 120px;
    border: 3px solid #cccccc !important;
}

.slide-in-left {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); }

.slide-in-left.ng-enter, .slide-in-left > .ng-enter {
  -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  -moz-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  -o-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  -ms-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
  transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; 
}

.slide-in-left.ng-enter-active, .slide-in-left > .ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slide-in-left.ng-leave, .slide-in-left > .ng-leave {
  -webkit-transition: all ease-in-out 250ms;
  -moz-transition: all ease-in-out 250ms;
  -o-transition: all ease-in-out 250ms;
  -ms-transition: all ease-in-out 250ms;
  transition: all ease-in-out 250ms; 
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); }

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "templates/event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html"
        }
      }
    });

  $urlRouterProvider.otherwise("/event/home");
})
.controller('MainCtrl', function($scope, $timeout, $filter) { 

  $scope.users = [
    {id: 1, name: "Valentina", selected: true},
    {id: 2, name: "Juan David", selected: false},
    {id: 3, name: "Osman", selected: false},
    {id: 4, name: "Silva", selected: false}
  ];

  $scope.groups = [
    {Id: 1, Name: "Admin", Selected: false},
    {Id: 2, Name: "Developers", Selected: false},
    {Id: 3, Name: "Testers", Selected: false},
    {Id: 4, Name: "Users", Selected: false}
  ];

  $scope.getOptionsSelected = function(options, valueProperty, selectedProperty){
    var optionsSelected = $filter('filter')(options, function(option) {return option[selectedProperty] == true; });
    return optionsSelected.map(function(group){ return group[valueProperty]; }).join(", ");
  };
})
.directive('ionMultipleSelect', ['$ionicModal', '$ionicGesture', function ($ionicModal, $ionicGesture) {
  return {
    restrict: 'E',
    scope: {
      options : "="
    },
    controller: function ($scope, $element, $attrs) {
      $scope.multipleSelect = {
        title:            $attrs.title || "Select Options",
        tempOptions:      [],
        keyProperty:      $attrs.keyProperty || "id",
        valueProperty:    $attrs.valueProperty || "value",
        selectedProperty: $attrs.selectedProperty || "selected",
        templateUrl:      $attrs.templateUrl || 'templates/multipleSelect.html',
        renderCheckbox:   $attrs.renderCheckbox ? $attrs.renderCheckbox == "true" : true,
        animation:        $attrs.animation || 'slide-in-up'
      };

      $scope.OpenModalFromTemplate = function (templateUrl) {
        $ionicModal.fromTemplateUrl(templateUrl, {
          scope: $scope,
          animation: $scope.multipleSelect.animation
        }).then(function (modal) {
          $scope.modal = modal;
          $scope.modal.show();
        });
      };

      $ionicGesture.on('tap', function (e) {
       $scope.multipleSelect.tempOptions = $scope.options.map(function(option){
         var tempOption = { };
         tempOption[$scope.multipleSelect.keyProperty] = option[$scope.multipleSelect.keyProperty];
         tempOption[$scope.multipleSelect.valueProperty] = option[$scope.multipleSelect.valueProperty];
         tempOption[$scope.multipleSelect.selectedProperty] = option[$scope.multipleSelect.selectedProperty];

         return tempOption;
       });
        $scope.OpenModalFromTemplate($scope.multipleSelect.templateUrl);
      }, $element);

      $scope.saveOptions = function(){
        for(var i = 0; i < $scope.multipleSelect.tempOptions.length; i++){
          var tempOption = $scope.multipleSelect.tempOptions[i];
          for(var j = 0; j < $scope.options.length; j++){
            var option = $scope.options[j];
            if(tempOption[$scope.multipleSelect.keyProperty] == option[$scope.multipleSelect.keyProperty]){
              option[$scope.multipleSelect.selectedProperty] = tempOption[$scope.multipleSelect.selectedProperty];
              break;
            }
          }
        }
        $scope.closeModal();
      };

      $scope.closeModal = function () {
        $scope.modal.remove();
      };
      $scope.$on('$destroy', function () {
          if ($scope.modal){
              $scope.modal.remove();
          }
      });
    }
  };
}]);