Question

我的问题很简单。

我拥有的东西。

- 我使用从后端收到的数据（JSON）制作的表格（形式）。

- 表格将是Multilevel Nested（目前它的两级嵌套）。

- 每个嵌套表单元素都有一个转发器，它会在单击按钮时向表单添加另一个元素。

- 页面顶部会有一个按钮，可以将表单元素的状态切换为readOnly。

我面临的问题

- 单击按钮时，表单元素的状态将更改为readOnly，除了嵌套之外。

我想要什么

- 单击按钮时，表单中的每个元素都应将其状态更改为readOnly，嵌套或不嵌套。

这是控制器......其次是JS-Bin链接。

app.controller('MainCtrl', function MainCtrl(formlyVersion) {
  var vm = this;

  vm.onSubmit = onSubmit;
  vm.exampleTitle = 'Nested Repeating Section';
  vm.options = {
    formState: {
      readOnly: true
    }
  };

  init();

  vm.originalFields = angular.copy(vm.fields);


  function onSubmit() {
    alert(JSON.stringify(vm.model), null, 2);
  }


  function init() {
    vm.fields = [{
      key: 'name',
      type: 'input',

      templateOptions: {
        label: 'Name',
        required: true,
        minlength: 5,
        maxlength: 25
      }
    }, {
      key: 'description',
      type: 'textarea',

      templateOptions: {
        label: 'Description',
        rows: 5,
        maxlength: 100
      }
    }, {
      wrapper: 'panel',
      templateOptions: {
        label: 'Cars'
      },
      fieldGroup: [{
        type: 'repeatSection',
        key: 'cars',
        templateOptions: {
          btnText: '+',
          fields: [{

            wrapper: 'panel',
            templateOptions: {
              label: 'New car'
            },
            fieldGroup: [{
              key: 'carname',
              type: 'input',
              templateOptions: {
                label: 'Name',
                required: true,
                maxlength: 25
              }
            }, {
              key: 'cardesc',
              type: 'input',
              templateOptions: {
                label: 'Description',
                maxlength: 50
              }
            }]
          }]
        }
      }]
    }];
  }
});

http://jsbin.com/sunocaf/edit?html,js,output

提前致谢

P.S。 - 我从官方角度形式的网站上采取了这个例子。

Answer 1

这只会使输入readOnly，并且不会影响单选按钮或复选框。按钮就是这个问题。

要执行您想要的操作，请将按钮中的ng-click事件设置为：

ng-click="readOnly()"

然后在控制器中：

   $scope.readOnly = function() {
       $(document).ready(function () {
            $('input').click(function (e) {
                e.preventDefault();
            });
        });
   };

这将防止任何输入发生。如果您需要隐藏/禁用按钮，您可以将readOnly标志设置为true，并在按钮设置为！model.readOnly上进行ng-show或ng-disabled。

如果你想假装你使用的是角度而不是jQuery，即使angular.element是jQuery的ALIAS（直接来自角度文档），那么你可以这样做：

 $scope.readOnly = function() {
     angular.element(function() {
            angular.element('input').trigger('click')(function(e) {
                e.preventDefault();
            };
       });
 };

Answer 2

我能够找到解决问题的方法。我仍然通过一个按钮来控制禁用功能，唯一的区别是我正在为我的表单的重复部分使用一个单独的控制器。

这样我可以使用数据服务向重复部分的控制器提供一个标志，以便将其与整个表单一起禁用。

为了实现这一点，我不得不稍微调整重复部分的包装，但最终的结果正是我想要的。

干杯。

如何在单击按钮时将嵌套的表单形式的状态更改为只读

2 个答案: