JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<h4>Angular-xeditable Date (Bootstrap 2 version)</h4>
<div ng-app="app" ng-controller="Ctrl">
  <div id="filter">
     <!-- ind1 -->
    <span 
      editable-text="ind1.name" e-typeahead="ind1.name for ind1 in inds | filter:{name:$viewValue} | limitTo:10" onbeforesave="" onaftersave="showArgs1($data);">
   {{ind1.name || 'empty'}} </span> (<span editable-text="arg.name" ng-repeat="arg in ind1.args">{{ arg.name || 'empty' }}, </span>)&nbsp;&nbsp;
      
     <!-- op -->
    <span 
      editable-text="op.empty" e-typeahead="op.name for op in ops | filter:{name:$viewValue} | limitTo:10" onbeforesave="" onaftersave="" class="btn btn-primary" style="color:white">
   {{op.name || 'empty'}} </span>&nbsp;&nbsp;
   
   <!-- ind2 -->
    <span 
      editable-text="ind2.name" e-typeahead="ind2.name for ind2 in inds | filter:{name:$viewValue} | limitTo:10" onbeforesave="" onaftersave="showArgs2($data);">
   {{ind2.name || 'empty'}} </span> (<span editable-text="arg.name" ng-repeat="arg in ind2.args">{{ arg.name || 'empty' }}, </span>)&nbsp;&nbsp;
   
   <span class="btn btn-primary" style="color:white">+</span>
  </div>    
</div>
<br/>
<br/>

CSS

div[ng-app] { margin: 50px; }

JavaScript

var app = angular.module("app", ["xeditable", "ui.bootstrap"]);
app.run(function(editableOptions) {
  editableOptions.theme = 'bs2';
});

app.controller('Ctrl', function($scope, $filter) {
    /***/
    $scope.inds = [
    	{name:"iMa",args:[{name:"maPeriod",type:"int"}]},
    	{name:"iMa2",args:[{name:"ma2Period",type:"int"}]},
    	{name:"iMa3",args:[{name:"ma3Period",type:"int"}]},
    	{name:"iCci",args:[
      	{name:"cciPeriod",type:"int"},
        {name:"arg2",type:"int"}
      	]}
      ];
    $scope.indsMap={};
    $scope.inds.forEach(function(el,idx){
    	$scope.indsMap[el.name]=idx;
    });  
    //$scope.ind1 = $scope.inds[0];
    //$scope.ind2 = $scope.inds[0];
    
    /***/
    $scope.ops = [
    	{name:"oLower"},
    	{name:"oUpper"},
    	{name:"oEqual"},
    	{name:"oCrossOver"},
    	{name:"oCrossUnder"}
      ];
    $scope.opsMap={};
    $scope.ops.forEach(function(el,idx){
    	$scope.opsMap[el.name]=idx;
    }); 
    $scope.op=$scope.ops[0];
    
    /***/
   $scope.showArgs1 = function(data) {//return things only on error
     $scope.ind1 = $scope.inds[$scope.indsMap[data]];
   };   
   $scope.showArgs2 = function(data) {//return things only on error
     $scope.ind2 = $scope.inds[$scope.indsMap[data]];
   };   
  
  
/*$scope.$watch(
    'ind1.name',//function() { return $scope.find; },//$scope.ind,
    function(newVal, oldVal) { 
    	console.log("watch=>",newVal, oldVal); 
    }
);*/
});