JSFiddle - React, Tailwind, and code Playground

by sseletskyy

HTML

<div ng-app>
    <ul ng-controller="SelectorCtrl">
        <li>
              {{property.Name}}
              <select size="3" ng-model="property.Value" ng-options="item.Value as item.Name for item in property.Choices">
              </select>
          </li>
        <li>
              {{property2.Name}}
              <select size="3" ng-model="property2.Value" ng-options="item.Value as item.Name for item in property2.Choices">
              </select>
          </li>
        <li>
              {{property3.Name}}
              <select size="3" ng-model="property3.Value" ng-options="item.Value as item.Name for item in property3.Choices">
                <option value=""></option>
              </select>
          </li>
    </ul>
</div>

CSS

li {
    padding-top: 20px;
    padding-right: 50px;
    vertical-align: top;
    list-style-type: none;
    text-align: right;
}

JavaScript

function SelectorCtrl($scope) {

  $scope.property = {
    "Name": "Show empty option by default", 
      "Value": null,      
    "Choices": [{
        "Id": 1,
        "Value": "1",
        "Name": "Option 1"
    }, {
        "Id": 2,
        "Value": "2",
        "Name": "Option 2",
    }]
  }
  $scope.property2 = {
    "Name": "Empty option is missing if Value is set", 
      "Value": "1",      
    "Choices": [{
        "Id": 1,
        "Value": "1",
        "Name": "Option 1"
    }, {
        "Id": 2,
        "Value": "2",
        "Name": "Option 2",
    }]
  }
  $scope.property3 = {
    "Name": "Empty option is added manually", 
      "Value": "2",      
    "Choices": [{
        "Id": 1,
        "Value": "1",
        "Name": "Option 1"
    }, {
        "Id": 2,
        "Value": "2",
        "Name": "Option 2",
    }]
  }

}