JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="HomeCtrl">
  <h3>Data List</h3>

  <table>
    <tbody>
      <tr ng-repeat="city in cities">
        <td>{{city.id}}</td>
        <td>{{city.name}}</td>
      </tr>
    </tbody>
  </table>
  
  <h3>Selected City (by Id)</h3>
  selectedCityId: <strong>{{selectedCityId}}</strong>
  <br/>
  <br/>
  <label>Select City
    <select ng-model="selectedCityId" ng-options="city.id as city.name for city in cities">
      <option value="">-- Select City --</option>
    </select>
  </label>
  
  <hr/>
 
  <h3>Selected City (by object)</h3>
  selectedCity: <strong>{{selectedCity}}</strong>
  <br/>
  <br/>
  <label>Select City
    <select ng-model="selectedCity" ng-options="city as city.name for city in cities track by city.id">
      <option value="">-- Select City --</option>
    </select>
  </label>

  <hr/>

  <!-- Scripts -->
  <script data-require="[email protected]" data-semver="1.5.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="HomeCtrl.js"></script>

</body>
</html>