在 fieldGroup 周围添加一个包装器

Question

我创建了以下内容jsbin

请注意 fieldGroup 由于 wrapper 设置而没有显示。如果您 remove/comment 出 wrapper，则字段会正确显示。

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

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

Answer 1

不幸的是 fieldGroup 不支持包装器，添加它们意味着增加 angular-formly 的复杂性。

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

  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>`

在 fieldGroup 周围添加一个包装器

Add a wrapper around a fieldGroup

angularjs

angular-formly