AngularJS:根据模型类型显示适当的表单元素

AngularJS: Show appropriate form elements depending on model type

本文关键字：表单 元素 显示 类型 模型 AngularJS      更新时间：2023-09-26

我有一个ConfigValues 的 Angular 模型。 本质上，它是从 C# 传入的Dictionary，看起来有点像：

{
   Name: "Config Name",
   Value "True",
   Type: 0 // boolean
}
有些是

布尔值，有些是整数等。 我想要的是当我遇到布尔类型时智能地显示checkbox（或者可能是select），然后在看到另一种类型时显示正常input。

我该怎么做？

<table>
    <tr ng-repeat="(key, val) in module.ConfigValues">
        <td>{{key}}</td>
        <td><input type="text" ng-model="val.Value" ng-disabled="module.saving" /></td>
    </tr>
</table>

尝试使用 ngIf ：

<table>
    <tr ng-repeat="(key, val) in module.ConfigValues">
        <td>{{key}}</td>
        <td>
            <input type="text" ng-model="val.Value" ng-disabled="module.saving" ng-if="val.Type !== 0" />
            <input type="checkbox" ng-model="val.Value" ng-disabled="module.saving" ng-if="val.Type === 0" />
        </td>
    </tr>
</table>

如果你要有更多的类型，也许你可以尝试ngSwitch：

<table>
    <tr ng-repeat="(key, val) in module.ConfigValues">
        <td>{{key}}</td>
        <td>
            <span ng-switch="val.Type">
                <input type="checkbox" ng-model="val.Value" ng-disabled="module.saving" ng-switch-when="0" />
                <input type="text" ng-model="val.Value" ng-disabled="module.saving" ng-switch-default="0" />
            </span>
        </td>
    </tr>
</table>
相关文章：