JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div ng-app="RuleModule">
  <div ng-controller="RuleCtrl">
        Oprand
    <select ng-model="oprand" ng-options="o.OperandName for o in model.RuleCategory.Operands" >
        <option style="display:none" value="">select</option>
    </select>
    Operator
    <select ng-model="OperatorName" ng-options="o.OperatorName for o in oprand.ApplicableOperators" >
    </select>
    
  
    <dynamic-input type="{{OperatorName.DisplayType}}"></dynamic-input>
  </div>
</div>

JavaScript

var App = angular.module("RuleModule", []);

App.directive('dynamicInput', function () {
    var link = function (scope, element, attr) {
        var render = function () {
            var t = attr.type;
            switch (t) {
                case "undefined":
                    break;
                case "0":
                    element.html('<input type="text" />');
                    break;
                case "1":
                    element.html('<input type="checkbox" />');
                    break;
                case "2":
                    element.html('<input type="radio" />');
                    break;
                case "3":
                    element.html('<select></select>');
                    break;
                case "4":
                    element.html('<select></select>');
                    break;
                case "5":
                    element.html('<select class="multiselect" multiple="multiple"></select>');
                    break;
                case "6":
                    element.html('<input type="text" /><input type="text" />');
                    break;
                case "7":
                    element.html('<input class="datepicker" type="text" /><input class="datepicker" type="text" />');
                    break;
                case "8":
                    element.html('<input class="timepicker" type="text" /><input class="timepicker" type="text" />');
                    break;
                default:
            }
        };
        attr.$observe('type', function() {
            render();
        });
        render();
    };
    return {
        restrict: 'E',
        link: link
    };
});

function RuleCtrl($scope) {
    $scope.model = createModel;
    $scope.OperatorName = [];
    $scope.oprand = [];

    $scope.addCondition = function () {

    };
}





var Operands = [{
  "OperandID": 1,
    "OperandName": "Order Modality",
    "ApplicableOperators": [{
    "OperatorName": "IS",
     ...