JSFiddle - React, Tailwind, and code Playground

by jgoemat

HTML

<div ng-app>
    <div ng-controller="MainCtrl">
        <table border="0" cellpadding="0" cellspacing="0" width="50%">
            <tr>
                <td>
                    <select ng-model="selectedQuery" 
                    ng-options="q.name for q in queryList" >
                        <option title="---Select Query---" value="">---Select Query---</option>
                    </select>
                </td>
            </tr>
            <tr ng-repeat="field in selectedQuery.fields">
                <td>{{field.name}}:</td>
                <td><input type="text" ng-model="field.value" /></td>
            </tr>
        </table>
        <div>
            
            <p>{{selectedQuery|json}}</p>
            <div>

JavaScript

function MainCtrl($scope) {
     $scope.queryList = [
         { name: 'Check Users', fields: [ { name: "Name" },  { name: "Id" } ] },
        { name: 'Audit Report', fields: [] },
         { name: 'Bounce Back Report', fields: [ { name: "Date" } ] } 
      ];
}