个人中心
gpt4 book ai didi

angularjs - 动态添加字段到fieldGroup

转载 作者：行者123 更新时间：2023-12-02 21:12:27 26 4
gpt4 key购买 nike

我创建了这个jsbin其中我有一个包含 2 个字段的 fieldGroup 。有一个名为 AddRow 的按钮，按下该按钮后，我尝试动态地将另一个字段添加到 fieldGroup 中。

Formly 可以做到这一点吗？此示例是它在我的解决方案中如何工作的简化版本。我将从 Rest 调用中获取所需的各种字段类型的列表。此调用返回的任何内容都将是需要添加到 fieldGroup 中的字段。从小处开始...我只是想添加一个基于按钮单击的字段。

最佳答案

您的错误是尝试推送字符串而不是对象。请参阅更正后的 JSBin:http://jsbin.com/weyowu/edit?html,js,output

以更高级的方式，您可以创建重复部分(自定义模板)来动态添加/删除表单的部分:

查看更多高级用法:http://angular-formly.com/#/example/advanced/repeating-section

查看示例片段:

/* global angular */
(function() {
  console.clear();

  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
    var unique = 1;
    formlyConfigProvider.setType({
      name: 'repeatSection',
      templateUrl: 'repeatSection.html',
      controller: function($scope) {
        $scope.formOptions = {
          formState: $scope.formState
        };
        $scope.addNew = addNew;

        $scope.copyFields = copyFields;


        function copyFields(fields) {
          fields = angular.copy(fields);
          addRandomIds(fields);
          return fields;
        }

        function addNew() {
          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] || [];
          var repeatsection = $scope.model[$scope.options.key];
          var lastSection = repeatsection[repeatsection.length - 1];
          var newsection = {};
          if (lastSection) {
            newsection = angular.copy(lastSection);
          }
          repeatsection.push(newsection);
        }

        function addRandomIds(fields) {
          unique++;
          angular.forEach(fields, function(field, index) {
            if (field.fieldGroup) {
              addRandomIds(field.fieldGroup);
              return; // fieldGroups don't need an ID
            }

            if (field.templateOptions && field.templateOptions.fields) {
              addRandomIds(field.templateOptions.fields);
            }

            field.id = field.id || (field.key + '_' + index + '_' + unique + getRandomInt(0, 9999));
          });
        }

        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min)) + min;
        }
      }
    });
  });


  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Joe Zhou',
      url: 'https://plus.google.com/u/0/111062476999618400219/posts' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'Repeating Section'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    vm.options = {};

    init();

    vm.originalFields = angular.copy(vm.fields);

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }


    function init() {
      vm.model = {
        keys: [{}, ]
      };

      vm.fields = [{
        type: 'repeatSection',
        key: 'keys',
        templateOptions: {
          btnText: 'Add another Field',
          fields: [{
            key: 'key1',
            type: 'input',
            templateOptions: {
              label: 'A Field'
            }
          }]
        }
      }];
    }
  });

})();
<!DOCTYPE html>
<html>

<head>
  <!-- Twitter bootstrap -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

  <!-- apiCheck is used by formly to validate its api -->
  <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
  <!-- This is the latest version of angular (at the time this template was created) -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

  <!-- This is the current state of master for formly core. -->
  <script src="https://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
  <!-- This is the current state of master for the bootstrap templates -->
  <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

  <title>Angular Formly Example</title>
</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
  <div>
    <h1>angular-formly example: {{vm.exampleTitle}}</h1>
    <div>
      This demonstrates using <code>formly-form</code> inside of a template in order to accomplish repeating fields. It also uses <code>formly-field</code> inside of a template in order to accomplish an advanced layout.
    </div>
    <hr />
    <form ng-submit="vm.onSubmit()" novalidate>
      <formly-form model="vm.model" fields="vm.fields" form="vm.form" options="vm.options">
        <button type="submit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit</button>
      </formly-form>
    </form>
    <hr />
    <h2>Model</h2>
    <pre>{{vm.model | json}}</pre>
    <h2>Fields <small>(note, functions are not shown)</small></h2>
    <pre>{{vm.originalFields | json}}</pre>
    <h2>Form</h2>
    <pre>{{vm.form | json}}</pre>
  </div>

  <div style="margin-top:30px">
    <small>
        This is an example for the
        <a href="https://formly-js.github.io/angular-formly">angular-formly</a>
        project made with ♥ by
        <strong>
          <span ng-if="!vm.author.name || !vm.author.url">
            {{vm.author.name || 'anonymous'}}
          </span>
          <a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
            {{vm.author.name}}
          </a>
        </strong>
        <br />
        This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
      </small>
  </div>

  <script type="text/ng-template" id="repeatSection.html">
    <div>
      <!--loop through each element in model array-->
      <div class="{{hideRepeat}}">
        <div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
          <formly-form fields="fields" model="element" form="form">
          </formly-form>
          <div style="margin-bottom:20px;">
            <button type="button" class="btn btn-sm btn-danger" ng-click="model[options.key].splice($index, 1)">
              Remove
            </button>
          </div>
          <hr>
        </div>
        <p class="AddNewButton">
          <button type="button" class="btn btn-primary" ng-click="addNew()">{{to.btnText}}</button>
        </p>
      </div>
  </script>
</body>

</html>

关于angularjs - 动态添加字段到fieldGroup，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32721498/

26 4 0
文章推荐： Cassandra:将键空间数据从多节点集群迁移到单节点集群
文章推荐： react-native - 在 React Native 中使用 flex 样式宽度
文章推荐： smpp - Kannel 启动但不创建日志文件
文章推荐： django - 如何使用迁移框架添加 Django REST Framework 身份验证 token
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com