Question

我遇到角度问题，我似乎无法绕过它。

我构建了一个CMS，使产品所有者能够设计一个动态注册表单，然后通过api输出为JSON。

我在应用程序端使用angular来获取此JSON并构建动态表单。我想在选中复选框时使用ng-model和ng-show来显示/隐藏某些元素。

例如，我有一个复选框，上面写着“这也是我的邮寄地址”，当取消选中时，会显示一个额外的地址表单，以便用户输入他们的送货信息。

在JSON响应中，对于每个字段，我定义了“ruleKey”，它应该充当该字段的ng模型（例如：isSameAddress）。然后在发货地址表格中设置ng-show =“！isSameAddress”。

当我将这个“ruleKey”硬编码到ng-model和ng-show中时，一切都按预期工作......但是我需要它是动态的并且来自返回的api值。这是我遇到问题的地方，我不知道如何修复它。

这是我设置的基本小提琴，用于演示我的问题： http://jsfiddle.net/tdanielcox/st6Lw90x/

以下是有问题的指示：

myApp.directive('textField', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            toggler: '='
        },
        template: '<input type="text" value="Test text" />',
        transclude: false,
        link: function (scope, element, attr) {
            element[0].getElementsByTagName('input')[0].setAttribute('ng-show', scope.toggler);
            $compile(element.contents())(scope);
        }
    };
});

myApp.directive('checkboxField', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            toggler: '='
        },
        template: '<input type="checkbox" />',
        transclude: false,
        link: function (scope, element, attr) {
            element[0].getElementsByTagName('input')[0].setAttribute('ng-model', scope.toggler);
            $compile(element.contents())(scope);
        }
    };
});

如果有人知道如何实现这一目标，我将非常感激。我用Google搜索并用Google搜索，但没有找到任何可以帮助我的东西。

感谢阅读：）

编辑：

以下是API返回的JSON示例，请注意ruleKey以及两个fielset对象中的规则。 ruleKey应该用于ng-model，规则是ng-model应该控制的。

**请注意，我上面提供的示例不适合此服务响应。这个例子是为了说明我想要实现的简单版本。实际上，我已经设置了控制器和指令来循环服务响应并正确构建表单。

{
    ... //  OTHER REGISTRATION FIELDS
},
{  //  FIELDSET 1
    rules: {},
    fields: [
        {
            type: 'checkbox',
            name: 'sameMailingAddr',
            label: 'This is also my mailing address',
            value: true,
            checked: false,
            ruleKey: 'isSameAddress'  //  BINDS TO NG-MODEL
        },
    ],
},
{  //  FIELDSET 2's visible is controlled by the checkbox in FIELDSET 1
    rules: {
        show: '!isSameAddress'  //  BINDS TO NG-SHOW
    },
    fields: [
        {
            type: 'text',
            name: 'address',
            label: 'Street address', 
            labelLocation: 'placeholder',
        },
        {
            type: 'text',
            name: 'address2',
            label: 'Street address 2', 
            labelLocation: 'placeholder',
        },
        {...}
    ]
},

Answer 1

要么是基于JSON以完全动态的方式构建表单。然后，您可以在构造模板时对属性名称进行硬编码并进行编译。

或者你有一个像“它总是一个复选框和一个文本输入”的设置结构，但属性可能有不同的名称。（这很难想象，因为您的数据还必须包含元数据，告诉您哪个属性属于复选框等等，有效地允许从模板中添加可设置的属性。）在这种情况下，您可以在数据对象和具有众所周知属性的另一个对象之间设置双向绑定（使用$watch(expression, handler, true)），您可以再次从模板中进行寻址。

举例说明第二种情况：如果您已准备好所有元数据，您可以随时执行以下操作：

<div ng-repeat="field in fields">
    <label>{{field.label}}</label>
    <span ng-switch="field.type">
        <input ng-switch-default type="text" ng-model="data[field.name]">
        <!-- ... (ng-switch-when cases for other field types) -->
    </span>
</div>

使用带有ng-model的变量（来自服务）

1 个答案: