Question

我的范围内有一个名为fields的CSV。现在我想从中创建一个表单。

有些事情：

<div ng-repeat="f in fields.split(',')">
    <label>
        {{f}}
        <input ng-model="{{f}}"/>
        <div>my input is = {{{{f}}}}</div>
    </label>
</div>

显然input和结果语句是错误的。问题是我该怎么办？

修改

最终目标是从外部获取my input is div。这将允许我构建一个完全基于用户输入的“自定义窗口小部件”窗体。

Answer 1

我会在控制器中拆分字符串，并创建一个字段数组：

var fields = [];
var tokens = string.split(',');
for (var i = 0; i < tokens.length; i++) {
    fields.push({name: tokens[i], value: '');
}
$scope.fields = fields;

然后在页面中：

<div ng-repeat="f in fields">
    <label>
        {{ f.name }}
        <input ng-model="f.value"/>
        <div>my input is = {{ f.value }}</div>
    </label>
</div>

Answer 2

我用一个指令和$ rootScope解决了这个问题（这有点难看，但不比范围更难看。$ parent） - 但我仍然愿意接受更好的解决方案。

'use strict';

angular.module('myApp')
  .directive('metaField', function ( $compile , $rootScope ) {
    return {
      template: '<div></div>',
      restrict: 'A',

        scope:true,
      link: function(scope, element, attrs) {
          attrs.$observe( 'fieldName',function( value ){
              console.log(["appending",value]);
              var myTemplate =  "<label>" + value + "<input ng-model=\"" + value + "\"/><div>{{" + value + "}}</div></label>"
               element.append( $compile( myTemplate )($rootScope) );
          });
      }
    };
  });

这是指令代码，这是你如何使用它

<input ng-model="fieldNames"/>
<div ng-repeat="f in fieldNames.split(',')">
    {{f}}
    <div meta-field field-name="{{f}}"></div>
</div>

这是plunkr。

如何从CSV创建输入字段？

修改

2 个答案: