如何使用角度输出动态形式场?

I want to render a form, based on a dynamic field configuration:

我想呈现一个基于动态字段配置的表单:

$scope.fields = [
    { title: 'Label 1', type: 'text', value: 'value1'},
    { title: 'Label 2', type: 'textarea', value: 'value2'}
];

This should output something that behaves like:

这应该输出一些行为:

<div>
    <label>{{field.title}}<br />
        <input type="text" ng-model="field.value"/>
    </label>
</div>
<div>
    <label>{{field.title}}<br />
        <textarea ng-model="field.value" rows="5" cols="50"></textarea>
    </label>
</div>

The simple implementation would be to use if statements to render the templates for each field type. However, as Angular doesn't support if statements, I'm lead to the direction of directives. My problem is understanding how the data binding works. The documentation for directives is a bit dense and theoretical.

简单的实现是使用if语句为每个字段类型呈现模板。然而，由于角度不支持if语句，我将引导指示方向。我的问题是理解数据绑定是如何工作的。指示的文档有点密集和理论性。

I've mocked up a bare bones example of what I try to do here: http://jsfiddle.net/gunnarlium/aj8G3/4/

我在这里做了一个简单的例子:http://jsfiddle.net/gunnarlium/aj8G3/4/。

The problem is that the form fields aren't bound to the model, so the $scope.fields in submit() isn't updated. I suspect the content of my directive function is quite wrong ... :)

问题是表单字段没有绑定到模型，所以是$作用域。submit()中的字段没有更新。我怀疑我的指令函数的内容是完全错误的……:)

Going forward, I need to also support other field types, like radio buttons, check boxes, selects, etc.

接下来，我还需要支持其他字段类型，如单选按钮、复选框、选择等等。

3 个解决方案

#1

The first problem you are running into regardless of the directive you are trying to create is using ng-repeat within a form with form elements. It can be tricky do to how ng-repeat creates a new scope.

不管您试图创建的指令是什么，您遇到的第一个问题是在带有表单元素的表单中使用ng-repeat。要处理ng-repeat如何创建一个新范围是很困难的。

This directive creates new scope.

该指令创建了新的范围。

I recommend also instead of using element.html that you use ngSwitch instead in a partial template.

我也建议不要使用元素。在部分模板中使用ngSwitch的html。

<div class="form-row" data-ng-switch on="field.type">
    <div data-ng-switch-when="text">
        {{ field.title }}: <input type="text" data-ng-model="field.value" />
    </div>
    <div data-ng-switch-when="textarea">
        {{ field.title }}: <textarea data-ng-model="field.value"></textarea>
    </div>
</div>

This still leaves you with the problem of modifying form elements in child scope due to ng-repeat and for that I suggest using the ngChange method on each element to set the value when an item has changed. This is one of the few items that I don't think AngularJS handles very well at this time.

由于ng-repeat的原因，仍然存在修改子范围内的表单元素的问题，因此我建议在每个元素上使用ngChange方法来设置项目更改后的值。这是我认为现在AngularJS处理不好的少数几个项目之一。

#2

You might consider Metawidget for this. It uses JSON schema, but is otherwise very close to your use case. Complete sample:

您可以考虑使用元小部件。它使用JSON模式，但在其他方面与您的用例非常接近。完整的示例:

<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
        <script src="http://metawidget.org/js/3.5/metawidget-core.min.js" type="text/javascript"></script>
        <script src="http://metawidget.org/js/3.5/metawidget-angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module( 'myApp', [ 'metawidget' ] )
                .controller( 'myController', function( $scope ) {

                    $scope.metawidgetConfig = {
                        inspector: function() {
                            return {
                                properties: {
                                    label1: {
                                        type: 'string'
                                    },
                                    label2: {
                                        type: 'string',
                                        large: true
                                    }
                                }
                            }
                        }
                    }

                    $scope.saveTo = {
                        label1: 'value1',
                        label2: 'value2'
                    }

                    $scope.save = function() {
                        console.log( $scope.saveTo );
                    }
                } );
        </script>
    </head>
    <body ng-controller="myController">
        <metawidget ng-model="saveTo" config="metawidgetConfig">
        </metawidget>
        <button ng-click="save()">Save</button>
    </body>
</html>

#3

The type attribute can be changed when the element is out of DOM, so why not a small directive which removes it from DOM, changes it type and then add back to the same place?

当元素离开DOM时，可以更改type属性，那么为什么不使用一个小指令从DOM中删除它，更改它的类型，然后添加回相同的位置呢?

The $watch is optional, as the objective can be change it dynamically once and not keep changing it.

$watch是可选的，因为目标可以动态地更改一次，而不是一直更改。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.rangeType = 'range';
  $scope.newType = 'date'
});

app.directive('dynamicInput', function(){
    return {
      restrict: "A",
      link: linkFunction
    };
    
    function linkFunction($scope, $element, $attrs){
      
      if($attrs.watch){
        $scope.$watch(function(){ return $attrs.dynamicInput; }, function(newValue){
          changeType(newValue);
        })
      }
      else
        changeType($attrs.dynamicInput);
      
      
      function changeType(type){
        var prev = $element[0].previousSibling;
        var parent = $element.parent();
        $element.remove().attr('type', type);
        if(prev)
          angular.element(prev).after($element);
        else
          parent.append($element);
      }
    }
});

span {
font-size: .7em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
    <h2>Watching Type Change</h2>
    Enter Type: <input ng-model="newType" /><br/>
    Using Type (with siblings): <span>Before</span><input dynamic-input="{{newType}}" watch="true" /><span>After</span><Br>
    Using Type (without siblings): <div><input dynamic-input="{{newType}}" watch="true" /></div>
    
    <br/><br/><br/>
    <h2>Without Watch</h3>
    Checkbox: <input dynamic-input="checkbox" /><br />
    Password: <input dynamic-input="{{ 'password' }}" value="password"/><br />
    Radio: <input dynamic-input="radio"  /><br/>
    Range: <input dynamic-input="{{ rangeType }}" />
</div>

Tested in latest Chrome and IE11.

测试了最新的Chrome和IE11。

#1