如何在使用Bootstrap Formly的选择框中实现onChange函数

Question

阅读了很多帖子后，我决定这应该有效：

vm.model.myChange = function(element) {
  console.log(element);
}

在vm.fields中：

{
"key": "transportation",
"type": "select",
"templateOptions": {
  "label": "How do you get around in the city",
  "valueProp": "name",
  "onChange": "model.myChange()", // ADDED
  "options": [{
    "name": "Car"
  }, {
    "name": "Helicopter"
  }]
}

实际上这没有任何影响，也就是说我的函数并没有被调用。生成的表单中也没有提到我的函数。

我找不到一个可行的示例来完成这个任务。有什么建议吗？

谢谢，保罗

- user1712240

---

你能请提供一个示例，说明这个不起作用吗？我期望你的函数会被调用（尽管你没有传递任何参数，所以在控制台上不会打印任何内容）。 - kentcdodds

请看这里：http://jsbin.com/veqosejaja/edit?js,console,output - user1712240

请将链接复制到浏览器中以查看翻译的文本内容：https://jsbin.com/zeyazo/edit?html,js,console,output - kentcdodds

太好了。非常感谢@kent。我会学习和努力的；）保罗 - user1712240

@user1712240，你能写下答案并接受它吗？ - Yahya KACEM

Answer 1

您可以执行以下任何一个操作：

templateOptions: {
   onChange: function($viewValue, $modelValue, $scope) {
   //implement logic here
   };
}

或者

templateOptions: {
   onChange: callMe()
},
controller: function($viewValue, $modelValue, $scope) {
    $scope.callMe = function() {
    //implement logic here
    };
}

或者

    templateOptions: {
       onChange: ''
    },
    expressionProperties : {
       'templateOptions.onChange': function($viewValue, $modelValue, $scope) {
       //implement logic here
       };
   }

- MattE

---

这个（第一个选项）对我没有任何作用；虽然我是formly的新手，但我想它可能与使用的模板中特定的templateOptions有关？像这里所示https://dev59.com/Ibjna4cB1Zd3GeqP-G2q#59791792那样使用`change`而不是`onChange`对我有效。 - mactyr

Answer 2

我处理这个问题的一种方法是从服务中提供我的JSON字段。通过这种方式，可以轻松地调用一个函数。

注意：这是从服务或工厂中提供的。

var getFields = function () {
    var fields = [
        {
           "key": "transportation",
           "type": "select",
           "templateOptions": {
           "label": "How do you get around in the city",
           "valueProp": "name",
           "onChange": "function(){//Implement your logic}"
           "options": [{
                "name": "Car"
           }, {
             "name": "Helicopter"
           }]
       }
   ] 
};

- CDan mbugua