Question

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

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

这已分配给$scope.data

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

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

它的伪逻辑是这样的......

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中解决这个问题？

谢谢！

Answer 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>

<强> JS

 $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

Answer 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 ...

Angularjs - 基于json输入的load元素

2 个答案: