JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

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

JavaScript

angular.module('rule', []).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 = Operands;
  $scope.OperatorName = [];
  $scope.oprand = [];

    $scope.getValues = function(){
      //data will come from ajax call
      return [{name: "CT", value: 10}, {name: "US", value: 12}];
  }

  $scope.addCondition = function () {

  };
}


//sample data


var Operands = [{
  "OperandID": 1,
    "OperandName": "Order Modality",
    "ApplicableOperators": [{
    "OperatorName": "IS",
      "DisplayType": 3
  }, {
    "OperatorName": "IS ONE OF",
      "DisplayType": 5
  }],
    "IsRequiresList": true,
    "OperandDataType": "long",
    "ListSourceInfo":...