在 Angular js 中使用单个 ng-repeat 动态生成 DOM 元素的最佳方法是什么

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);
      }
    };
  });