JSFiddle - React, Tailwind, and code Playground

Dropdown List

by pmamode

HTML

<body ng-app="app">
  <div ng-controller="Test">
    <p>selected item is : {{selectedItem}}</p>
    <p> age of selected item is : {{selectedItem.age}} </p>
    <select ng-model="selectedItem" ng-options="item.name for item in items">
    </select>
  </div>
</body>

CSS

.highLight {
  background-color: yellow;
}

.green {
  background-color: green;
}

select {
  border: 0 !important;
  /*Removes border*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: '';
  text-indent: 0.01px;
  /* Removes default arrow from firefox*/
  text-overflow: "";
  /*Removes default arrow from firefox*/
}

select::-ms-expand {
  display: none;
}

.select-wrapper {
  padding-left: 0px;
  overflow: hidden;
}

JavaScript

var app = angular.module('app', []);
app.controller('Test', function($scope) {
  $scope.items = [{
    name: 'one',
    age: 30
  }, {
    name: 'two',
    age: 27
  }, {
    name: 'threeeeeeeeeeee',
    age: 50
  }];
});