JSFiddle - React, Tailwind, and code Playground

by walker

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<div ng-app="app">
    <select ng-model="vvv" ng-options="value.field as value.fieldname for (key,value) in tpl">
        <option value="">--select one--</option>
    </select>
    <myquery tpl="tpl"></myquery>
    <div1>
        <div2 title="abc"></div2>
        <div2 title="ccc"></div2>
    </div1>
</div>

JavaScript

var app=angular.module('app',[]);
app.controller('ctrls',['$scope',function($scope){
    $scope.tpl=[
        {fieldname:"hospital",
         field:"hosid",
         op:['and','or','include'],
         fieldtype:"text",
         datasource:""
         },
        {fieldname:"start date",
         field:"date",
         op:['>=','>','==','<=',','],
         fieldtype:"date",
         datasource:""
         }
    ];
}]);
app.directive('myquery',[function(){
    return{
        restrict:'E',
        transclude:false,
        scope:{tpl:"="},
        template:'<div ng-repeat="f in tpl">'+
            '{{f.fieldname}}:'+
            '<select ng-model="opv" ng-init="opv=f.op[0]" ng-options="label for label in f.op" />'+
            '<input ng-model="opinput" />'+
            '{{f.field}} {{opv}} {{opinput}}'+
            '</div>'
    };
}]);

app.directive('div1',[function(){
    return {
        restrict:'E',
        transclude:true,
        scope:{},
        controller:function($scope){
            var ls = $scope.ls=[5,6];
            this.adds=function(el){
                ls.push(el);
            };
        },
        template:'<ul ng-repeat="ll in ls">'+
        '<li>{{ll}}</li>'+
        '</ul>'+
        '<div ng-transclude></div>'
    };
}]);
app.directive('div2',[function(){
    return {
        require:'^div1',
        restrict:'E',
        transclude:true,
        scope:{title:"@"},
        link:function(scope,element,attr,divCtrl){
            divCtrl.adds(scope.title);
        },
        template:'<div ng-transclude>{{title}}</div>'
    };
}]);