在angular formly中，如何将ng-click或ng-change添加到复选框？

Question

我正在使用 angular-formly，我正在尝试将正常的 angular 事件添加到复选框，但没有任何乐趣。这是我拥有的：

{
    type: "checkbox",
    key: "is_active",
    templateOptions: {
        type: "",
        label: "Is Active"
    }
}

我看了一遍又一遍的文档，我找不到解决方案。请在上面显示添加 ng-click 或 ng-change 的位置。

我希望像下面这样的东西能起作用：

{
    type: "checkbox",
    key: "is_active",
    templateOptions: {
        type: "",
        label: "Is Active"
    },
    ngClick : "functionName"
}

其中 functionName 是控制器内部呈现表单的函数。所以我的功能将始终在我的控制器中，我只需要定义事件或将事件传递给复选框

Answer 1

我已经有一段时间没把 formly 搞得一团糟了，但我相信这应该可以

{
    type: "checkbox",
    key: "is_active",
    templateOptions: {
        type: "",
        label: "Is Active",
        onClick: yourControllerFunctionHere  //notice this isn't a string but a reference to your controller function
    }        
}

ngModelAttrsTemplateManipulator documentation 中引用了此内容。我很喜欢 formly 但文档很难浏览

Answer 2

使用 ngModelElAttrs 属性：

{
    type: "checkbox",
    key: "is_active",
    templateOptions: {
      label: "Is Active"
    },
    ngModelElAttrs: {
      'ng-change': "model.text = 'asdf'"
    }
  }

在此 fiddle (http://jsbin.com/xavitufudu/1/edit?js,output) 中，我将您的复选框添加为第一个字段，更改后会更改下一个字段的内容。

这种方法不能直接访问外部范围，而是可以访问 formly 的范围。为了到达外部范围，我们可以添加字段的控制器，它可以访问外部范围（变量函数）：

{
    type: "checkbox",
    key: "is_active",
    templateOptions: {
      label: "Is Active"
    },
    ngModelElAttrs: {
      'ng-change': "myFunc()"
    },
    controller: function ($scope) {
      $scope.myFunc = function () {
        vm.model.text = 'Another text';
      };
    }
  }

在这里，我们通过外部范围访问 vm.model.text（尽管我们也可以通过内部字段的范围访问它，如 $scope.model.text）

在angular formly中，如何将ng-click或ng-change添加到复选框？

In angular formly, how to add ng-click or ng-change to a checkbox?

angularjs

angular-formly