M
M
Maxim Ivanov2016-07-22 13:02:36
JavaScript
Maxim Ivanov, 2016-07-22 13:02:36

How to efficiently and beautifully generate inputs?

I get 2 objects from the server, conditional ("ProcessStepInParams", "ProcessStepOutParams")
04daa8a79bfd4537939e37a28a44a893.png

based on them, I try to display controls in the page
, but the code, I suppose, is dirty

["ProcessStepInParams", "ProcessStepOutParams"].forEach(function(type, i){

        ProcessStepData = data.ProcessStep[type];
        ProcessStepData.forEach(function(item, i){

          // если есть элементы на вывод

          var PSD = item["EntityType"];
          if (PSD["EntityPropertyTypes"].length < 1) return;

          var caption = PSD["Caption"];
          var InnerHTML = "<div class='maintitle'>" + caption + "</div>";
    
          if (type == "ProcessStepInParams") 
          InnerHTML += '<div class="compliteinfo">';

          else 
          InnerHTML += '<div class="taskinfo">';
  
          PSD["EntityPropertyTypes"].forEach(function(item, i){
            
            var width = (item['PropertyType']['Width'] >= 250) ? item['PropertyType']['Width'] : "250"
            
            var size = "width: " + width + "px; float: left;"

              InnerHTML += '<div class="input-field col s12" style="' + size +  '">' + 
              '<input id="last_name" type="text" class="validate saveData" ' + 'ng-blur="saveData()">' +
              '<label for="last_name" class="">' +
              '<b>' + item.PropertyType["Caption"] + '</b>: ' + 
              '</label>' +
              '</div>'
          });
          
          InnerHTML += '<div class="clearfix"></div></div>'
          InnerHTML += '<style scoped>@media only screen and (max-width: 992px) {'
                 + 'html div.input-field {width: 100% !important;}}</style>'

          $(".maintext").append($compile( InnerHTML + '<br>' )($scope));

        });


      });

what do you suggest?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex, 2016-07-22
@splincodewd

And what about ANGULAR.JS ?
One gets the impression that 50% of questions on Angular are Jquery's who saw that it is fashionable to use Anglar and sculpt it everywhere.
If this is done in Angular, then a directive is made that is called in ng-repeat

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question