11

我想根据动态字段配置呈现一个表单：

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

这应该输出行为如下：

<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>

简单的实现是使用if语句来呈现每个字段类型的模板。但是，由于 Angular 不支持if语句，我被引导到指令的方向。我的问题是了解数据绑定的工作原理。指令的文档有点密集和理论化。

我已经模拟了我在这里尝试做的一个简单的例子：http: //jsfiddle.net/gunnarlium/aj8G3/4/

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

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

4

3 回答 3

23

无论您尝试创建什么指令，您遇到的第一个问题是在带有表单元素的表单中使用 ng-repeat。ng-repeat 如何创建新范围可能很棘手。

该指令创建新范围。

我还建议您在部分模板中使用ngSwitch而不是使用 element.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>

由于 ng-repeat，这仍然会给您留下修改子范围内的表单元素的问题，为此我建议在每个元素上使用 ngChange 方法来设置项目更改时的值。这是我认为 AngularJS 目前不能很好处理的少数项目之一。

于 2013-03-08T15:53:56.483 回答
4

您可能会为此考虑使用 Metawidget。它使用 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>
于 2013-08-13T05:57:29.727 回答
0

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

这$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>

在最新的 Chrome 和 IE11 中测试。

于 2017-04-05T13:31:05.580 回答