Angular formly multicheckbox

时间:2016-12-20 06:29:18

标签: angularjs angular-formly

我一直在寻找“多形式框架”类型的示例,以“角形式”形式,其中根据表单模型中的相应值选择或取消选中复选框,当加载表单时,但找不到任何形式可以帮助我一个例子吗?

我将解释我的确切案例:

以下是我的形式。它是一个多重复选框,键为'selectedAnswer'。表单模型中'selectedAnswer'的初始值为“ee,dd”。但是在加载时复选框中未检查对应的值表格。

[
   {
      "key":"selectedAnswer",
      "type":"multiCheckbox",
      "templateOptions":{
         "label":"fsdfsdf",
         "options":[
            {
               "name":"ee",
               "value":"ee"
            },
            {
               "name":"dd",
               "value":"dd"
            },
            {
               "name":"tg",
               "value":"tg"
            }
         ]
      }
   }
]

请帮我解决这个问题。 谢谢, Deepthy。

5 个答案:

答案 0 :(得分:2)

点击此DEMO例如

<强> HTLM / VIEW

<form novalidate>
            <formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
            </formly-form>
</form> 

脚本代码

var vm = this;
         vm.model = {
        check1: true,
         check2:false,
         check3:false
             };
        vm.Fields = [
        {
    key: 'check1',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check1"
      }
    }
  },{
    key: 'check2',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check2"
      }
    }
  },{
    key: 'check3',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check3"
      }
    }
  }

        ];

希望这适合你。

答案 1 :(得分:1)

您可以使用此类复选框列表 -

更新了答案

HTML /查看

    <form novalidate>
        <formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
        </formly-form>
    </form>

<强>控制器

 function MainController(province) {

        var vm = this;
         vm.model = {
        selectedAnswer: ["dd","ee"],

             };

    vm.Fields =[
   {
      "key":"selectedAnswer",
      "type":"multiCheckbox",
      "templateOptions":{
         "label":"fsdfsdf",
         "options":[
            {
               "name":"ee",
               "value":"ee"
            },
            {
               "name":"dd",
               "value":"dd"
            },
            {
               "name":"tg",
               "value":"tg"
            }
         ]
      }
   }
] }

为了更好地理解,请检查此Fiddle

我已经分享了Santhosh kesavan的答案,以提供更好的答案。 希望它对你有用。

答案 2 :(得分:0)

下面的代码会给你一个想法

<强>的index.html

<!doctype html>
<html lang="en" ng-app="checkBx">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-selected-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
  <label>Check me to select: <input type="checkbox" ng-model="isSelected"></label><br/>
  <label>Check me to select: <input type="checkbox" ng-model="isSecSelected"></label><br/>
</body>
</html>

<强>的script.js

var app = angular.module('checkBx', [])
app.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope){
  $scope.isSelected = true;
  $scope.isSecSelected = false;
}

答案 3 :(得分:0)

对于如下所示的嵌套键:

{
      key: 'domains',
      templateOptions: { label: 'Domains' },
      fieldGroup: [
        {
          key: 'domainsCheckbox',
          type: 'multicheckbox',
          templateOptions: {
          options: [
              {
                key: 'Option1',
                value: 'Option1'
              },
              {
                key: 'Option2',
                value: 'Option2'
              },
            ]
          },
        }
      ]
}

您可以将模型指定为: model = {'domains': {'domainsCheckbox': { 'Option1': true }}};

答案 4 :(得分:0)

我没有为我工作,在最新版本中,类型已更新。 like type: multiCheckbox --> multicheckbox and options.name --> options.key

X1 <- cbind(comb$dobyear, comb$municipality_code, comb$first_test, comb$sex)
colnames(X1) <- c("dobyear", "mun_code", "test_date", "sex")

Tr1 <- comb$Tr

#Define caliper for age within 5 years (see package documentation for caliper)
cal_age <- 3/sd(comb$dobyear)
cal_test_date <- 7/sd(comb$first_test, na.rm = T)

#match
matched <- Match(Tr = Tr1, X = X1, exact = c(F, T, F, T), caliper = c(cal_age, .001,  cal_test_date, .001), replace = F )