Question

我有一组类型为text，selectoptions和multiselectoptions的对象。我需要根据它们的类型将它们显示为可编辑的输入。

例如，文本对象：

<input type="text" name="caption" value="{{option.value}}" />

选择选项/多选项：

<div ng-repeat="value in option.values">
    <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" />
    <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" />
</div>

这是正确的方法吗？是否有更好的方式来表示它？

JSON对象的示例：

FORM: {
    options: [
        {
            type: "select",
            values: [
                {
                    value: 0,
                    caption: "Some option"
                },
                {
                    value: 1,
                    caption: "Some other option"
                }
            ]
        },
        {
            type: "text",
            caption: "Some text item"
        }
    ]
}

Answer 1

您可以使用ng-if根据您的模型显示正确的表单元素。以下是plunker based on your code.

中的示例

<form novalidate class="simple-form">
    <div ng-repeat="field in FORM.options">
        <input type="text" ng-model='field.caption' ng-if="field.type == 'text'" /><br />
        <div ng-if="field.type != 'text'">
             <div ng-repeat="value in field.values">
                Option: <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" /><br/>
                Caption: <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" /><br/>
             </div>
        </div>
    </div>
    <button ng-click="submit()">Save</button>
</form>

我检查类型field.type并在主ng-repeat中显示不同的HTML。

应用将您的模型分配给FORM：

$scope.FORM =  {
    options: [
        {
            type: "select",
            values: [
                {
                    value: 0,
                    caption: "Some option"
                },
                {
                    value: 1,
                    caption: "Some other option"
                }
            ]
        },
        {
            type: "text",
            caption: "Some text item"
        }
    ]
};

我还添加了一个在Javascript控制台中显示模型的提交按钮，因此您可以在更改值时看到数据正在更新：

<button ng-click="submit()">Save</button>

Answer 2

尝试ng-switch，它将根据JSON中的type切换到相应的HTML。

<div ng-repeat="opt in FORM.options" ng-switch on="opt.type">
    <select ng-switch-when="select">
        <option ng-repeat="val in opt.values" value='{{val.value}}'>{{val.caption}}</option>
     </select>

   <input type="text" ng-model="opt.caption"  ng-switch-when="text"/>
</div>

使用ng-switch-when = "multiselect"添加更多MultiSelect类型。如果未指定type，请将ng-switch-default设置为默认html。

Working Plunker

怎么显示差异。 HTML基于angularjs中的属性？

2 个答案: