angularjs - 如何从 CSV 创建输入字段？

Question

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

类似的东西：

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

显然inputand result 陈述是错误的。问题是我该怎么做？

编辑

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 解决了这个问题（这有点难看，但并不比 scope.$parent 更难看）——但我仍然愿意寻求更好的解决方案。

'使用严格';

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。