使用角度js

Question

<div class="col-lg-6" ng-repeat="controls in steps.infos">
      <div class="form-group">
          <label class="control-label" for="store_list">{{controls.label}}</label>
          <input type="{{controls.type}}" class="form-control input-lg mandatory" id="{{controls.id}}" ng-model="formData[controls.id]" value="{{controls.value}}" name="control_{{controls.id}}" ngRequired="{{controls.mandatory}}">
      </div>
  </div>

上面是我的代码，我只是在输入字段时动态生成dom元素。

我也希望生成其他类型的输入字段。比如选择框。 有什么方法可以通过使用指令或其他东西来实现这一点。 DOM元素不是某些可能输入的顺序，其他可能是选择然后再输入框可能会来。

请帮助解决此问题

由于

Answer 1

您可以创建一个指令，将您作为输入控制并相应地修改模板。

与此相似

Customizing the template within a Directive

修改

<div ng-repeat="content in vm.contents">

  <form-el formId="content.id"
           type="content.type"
           label="content.label"
           name="content.label"
           data="content.data"
    ></form-el>
</div>

指令::

 .directive('formEl', function () {
    return {
      restrict: 'E',
      compile: function(element, attrs) {
        var type = attrs.type || 'text';
        var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
        if(type=='text'){
          var htmlText = '<div class="control-group">' +
            '<label class="control-label" for="' + attrs.formId +   '">' + attrs.label + '</label>' +
            '<div class="controls">' +
            '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.name + '" ' + required + '>' +
            '</div>' +
            '</div>';
        } else if(type=='radio'){
          var htmlText = '<div class="control-group">' +
            '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
            '<div class="controls">';
          for(var i in attrs.data){
            htmlText=htmlText+'<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.name + '" ' + required + '>';
          }
          htmlText=htmlText + '</div>' +  '</div>';
        } else if(type=='selectoption'){
          //add html for radio button
        }
        element.replaceWith(htmlText);
      }
    };
  });