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

Question

我的问题很简单。

我有的东西

-- 我使用从后端接收的数据 (JSON) 制作的表格。

-- 表单将是多级嵌套的（目前是两级嵌套）。

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

-- 页面顶部将有一个按钮，用于将表单元素的状态切换为只读。

我面临的问题

-- 当我点击按钮时，表单元素的状态变为只读，除了嵌套的。

我想要的

--当我单击按钮时，表单的每个元素都应将其状态更改为只读，无论是否嵌套。

这里是控制器...后面是JS-Bin link.

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。 - 我从官方 angular 正式网站上拿了这个例子。

Answer 1

这只会使输入只读，不会影响单选按钮或复选框。按钮就此而言。

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

ng-click="readOnly()"

然后在控制器中：

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

这将阻止任何输入的发生。如果您需要 hide/disable 个按钮，您可以将只读标志设置为 true 并将按钮上的 ng-show 或 ng-disabled 设置为 !model.readOnly.

如果你想假装你正在使用 angular 而不是 jQuery，即使 angular.element 是 jQuery 的别名（直接从 angular 文档），那么你可以这样做：

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

Answer 2

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

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

为此，我不得不稍微调整重复部分的包装器，但最终结果正是我想要的。

干杯。

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

How to change state of nested formly form to readonly on click of a button

javascript

forms

nested-forms

angularjs

angular-formly