javascript - 如何显示差异基于AngularJS属性的HTML？

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>