Question

我正在研究语言清单和熟练程度。这将是一个对象数组：

languages : [ 
  { name : 'English', level : 'native' },
  { name : 'Spanish', level : 'good' }
]

所以我对字段有这样的定义：

{
    className       : 'col-xs-4',
    type                : 'ui-select', 
    key             : 'languages[' + index + '].name',
    templateOptions : {
           label                : 'Some label',
           options          : [ ... data there ... ],
           required         : true
    }
},
{

    className       : 'col-xs-8 btn-radio-language',
    type                : 'btn-radio',
    key             : 'languages[' + index + '].level',
    templateOptions : {
        label           : 'Proficiency',
        options         : ... data for native, good, so so ...
    }
}

这些定义会在索引方面重复几次。但是，不是使用模型中的值系列属性来解决数组语言，如：

"languages[0].level": "native",
"languages[1].level": "advanced",
"languages[0].name": "German"

已创建......

我如何指向模型中的语言数组？

Answer 1

如果我已正确理解，您可以使用languages.map(function(language) {...})映射数据。

请查看下面的演示或jsfiddle。

＆＃13;

angular.module('demoApp', ['formly', 'formlyBootstrap'])
  .controller('MainController', function() {
    var vm = this;
    vm.model = {};
    var languages = [ 
      { name : 'English', level : 'native' },
      { name : 'Spanish', level : 'good' }
    ];
    
    var createOptionTmpl = function(value) {
      return {
        name: value,
        value: value
      };
    };
    
    /*
    console.log(languages.map(function(lang) {
        	return {
          	name: lang.level,
            value: lang.level
          };
        }));*/
        
    vm.fields = [{
      className: 'col-xs-4',
      type: 'select',
      key: 'languages.name',
      templateOptions: {
        label: 'Some label',
        options: languages.map(function(lang) {
        	return createOptionTmpl(lang.name);
        }), //[...data there...],
        required: true
      }
    }, {

      className: 'col-xs-8 btn-radio-language',
      type: 'radio',
      key: 'languages.level',
      templateOptions: {
        label: 'Proficiency',
        options: languages.map(function(lang) {
        	return createOptionTmpl(lang.level);
        })
      }
    }];
  })

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/api-check/7.5.5/api-check.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/7.3.9/formly.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.2.0/angular-formly-templates-bootstrap.min.js"></script>

<div ng-app="demoApp" ng-controller="MainController as vm">
  <form ng-submit="vm.onSubmit()">
    <formly-form model="vm.model" fields="vm.fields"></formly-form>
    <button class="btn btn-primary">
      submit
    </button>
  </form>

  {{vm.model}}
</div>

＆＃13;

Angular formly - 为数组中的属性赋值

1 个答案: