角形formly multicheckbox

我一直在'角形formly形式'尋找一個'multicheckbox'類型的例子，其中複選框被選中或取消選擇基於表單模型中的相應值，當表單被加載，但可以找不到任何東西。有人可以幫我舉一個例子嗎？角形formly multicheckbox

，我會解釋我的具體情況：

以下是我formly form.Its與主要作爲形式模型selectedAnswer「爲selectedAnswer'.Initial值'a multicheckbox是‘EE，DD’。但在加載表單的複選框中沒有檢查到對應的值。

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

請幫我解決這個問題。感謝，深。

來源

2016-12-20 Ditpi

好的，你如何決定選定答案的初始值是什麼？任何模型在哪裏？提供一些代碼，以及 – Viplock

下面的代碼會給你的想法

的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; 
}

來源

2016-12-20 07:47:58

您可以使用此類型的複選框列表 -

更新回答

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的答案。希望它能爲你工作。

來源

2016-12-20 07:59:50 Viplock

但我正在尋找一個角度形式的例子。 – Ditpi

好的，讓我給答案帶來一些更新。 – Viplock

檢查更新後的答案@Ditpi – Viplock

點擊這個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" 
     } 
    } 
    } 

     ];

希望這對你的作品。

來源

2016-12-20 11:46:39

我想使用'multicheckbox'可以檢查多個選項。 – Ditpi

角形formly multicheckbox

回答

相關問題