JSFiddle - React, Tailwind, and code Playground

ng-options

by pmamode

HTML

<div ng-app='myApp' ng-controller="myCtrl">
  Every good boy does fine.
  <div class="dropdown">
    <div class="dropbtn">{{buttonTitle}}</div>
    <ul class="dropdown-content">
      <li ng-repeat="x in records">{{x}}</li>
    </ul>
  </div>
  Jack and Jill went up a hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after.
  <br>
  <br>Every good boy does fine.
  <select class="dropbtn" ng-model="configuration.safety_monitor.value" data-ng-options="x.id as x.name for x in configuration.safety_monitor.availableOptions">
  </select> Jack and Jill went up a hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after.
  <br>
  <br>{{configuration.safety_monitor.value}}

  <br>
  <br>
  <div edit-inline>
    <input type="text" value="hello world">
    <span class="dummy">blbla</span>
  </div>
  <div>
    <input type="text" value="hello world">
    <span class="dummy">blbla</span>
  </div>


</div>

CSS

.dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropbtn {
        background-color: grey;
        color: white;
        padding: 0px;
        border: none;
        cursor: pointer;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        width: auto;
        white-space: nowrap;
        color: black;
        padding: 6px 6px;
      }
      
      .dropdown-content li:hover {
        background-color: yellow;
      }
      
      .dropdown:hover .dropdown-content {
        display: block;
      }
      
      .dropdown:hover .dropbtn {
        background-color: black;
      }
      
      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;
      }
      
      input,
      .dummy {
        font-size: 12px;
        font-family: Arial;
        white-space: pre;
      }
      
      .dummy {
        /*visibility:hidden;*/ // Enable this to hide the dummy span
      }

JavaScript

var app = angular.module('myApp', []);

app.controller("myCtrl", function($scope) {

  $scope.configuration = {
    "safety_monitor": {
      "value": false,
      "availableOptions": [{
        "id": 1,
        "name": "Non-Safety Related"
      }, {
        "id": 2,
        "name": "Safety Related"
      }]
    }
  };

  $scope.buttonTitle = "Non-safety";
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ];

  $scope.name = 'World';

});

app.directive("editInline", function() {
    return function(scope, element, attr) {
      var elInput = element.find('input');
      var elDummy = element.find('span');
      var inputText = elInput.val();
      elDummy.html(inputText);
      elInput.bind("keydown keyup", function() {
        var inputText = elInput.val();
        elDummy.html(inputText);
        elInput.css('width', (elDummy[0].offsetWidth + 1) + 'px');
      });
    }
  });