Angularjs - 基于json输入加载元素答案

【问题标题】：Angularjs - load element based on json inputAngularjs - 基于json输入加载元素
【发布时间】：2013-12-13 22:51:26
【问题描述】：

我有一种情况，我收到一个 json 对象，而 json 数据中有一个看起来像这样的部分

{
  "elName": "elCst3",
  "label": "Label 3",
  "type": "input",
  "content": "some text",
}

这是分配给$scope.data

对象中的type表达式可以是input或textarea

在我的 html 模板中，根据 TYPE 的值，我应该加载文本字段（输入/文本）或文本区域元素。

它的伪逻辑是这样的..

IF {{data.type}} == "input" then

    <input id="data.elName" type="text" value="{{data.content}}">

ELSE IF {{data.type}} == "textarea" then

    <textarea id="data.elName">{{data.content}}</textarea>
ENDIF

我怎样才能在 Angularjs 中以最好和最简单的方式解决这个问题？

谢谢！

【问题讨论】：

标签： javascript jquery html json angularjs

【解决方案1】：

我会在你的情况下使用ng-if。比如：

HTML

<label ng-repeat="val in list">
    <div ng-if="val.type == 'input'">
        <input id="data.elName" type="text" value="{{val.content}}"></input>
    </div>
    <div ng-if="val.type == 'textarea'">
        <textarea id="data.elName">{{val.content}}</textarea>
    </div>
</label>

 $scope.list = [{
        "elName": "elCst3",
            "label": "Label 3",
            "type": "input",
            "content": "some text for input"
    }, {
        "elName": "elCst4",
            "label": "Label 3",
            "type": "textarea",
            "content": "some text for textarea"
    }];

演示Fiddle

【讨论】：

我会试试这个，然后回来发表评论。谢谢！你能提示一下“fessmodule.$inject = ['$scope'];”吗？有吗？
@PersistentNewbie 只是注入了作用域。你可以删除它

【解决方案2】：

如果您想根据尝试在视图中显示的 JSON 数据切换到不同的 HTML 部分，ngSwitch 是一个选项：

<div ng-repeat="val in list">
    <div ng-switch="val.type">
        <div ng-switch-when="input">
            <input type="text" value="{{val.content}}"></input>
        </div>
        <div ng-switch-when="textarea">
            <textarea cols="40" rows="5">{{val.content}}</textarea>
        </div>
        <div ng-switch-default>
            Unknown val type: {{val.type}}
        </div>
    </div>
</div>

顺便说一句：I had a similar question ...

【讨论】：