angularjs - 在 fieldGroup 周围添加一个包装器

Question

我创建了以下jsbin

请注意，fieldGroup由于设置原因， 不显示wrapper。如果您删除/注释掉，wrapper则字段会正确显示。

最终，我是来自服务调用的pushing对象。fieldGroup我希望组内的每个项目都成为<li>整体<ul>。所以我用包装器包装了每个单独的字段，<li>我计划用包装器包装整个 fieldGroup <ul>。但 Formly 似乎并不喜欢这种方法。

我究竟做错了什么？或者有没有更好的方法来制作这个列表？

Answer 1

不幸的是fieldGroup不支持包装器，添加它们意味着增加角度形式的复杂性。

幸运的是，有一种简单的方法可以使用自定义模板完成相同的结果：

  app.config(function (formlyConfigProvider) {

    // set templates here
    formlyConfigProvider.setType({
      name: 'nested',
      template: '<formly-form model="model[options.key]" fields="options.data.fields"></formly-form>'
    });

    formlyConfigProvider.setWrapper({
      name: 'panel',
      types: ['nested'],
      templateUrl: 'panel.html'
    });

  });

查看完整示例：http ://angular-formly.com/#/example/other/nested-formly-forms

Answer 2

我可能弄错了，但是您是否尝试根据从服务中提取的数据动态创建列表？

如果你是...

创建一个自定义的正式类型，该类型在 ul 中的 li 上有一个带有 ng-repeat 的模板。然后，您可以在类型上放置一个控制器并传入您的服务以进行迭代。

这是我在想的一个例子：

 formlyConfig.setType({

     name: 'myList',
     templateUrl: 'myList.view.html',
     controller: ['ListService', function(ListService) {
         var vm = this;
         ListService.getList().then(function(list) {
             vm.list = list.data
             vm.specific = list.data.specificItems
         } 
      }]
  });



<div type="text/ng-template", id="myList.view.html">

    <ul>
        <li ng-repeat="item for item in vm.list">{{item.name}}</li>
    </ul>

    <ul>
        <li ng-repeat="item for item in vm.specific">{{item.name}}</li>
    </ul>`
</div>`