AngularJS-基於json輸入的load元素

Question

我有一個情況，我收到一個json對象，並且在json數據中是一個看起來像這樣的部分

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

這已分配給$scope.data

對象中的類型表達式可以input或textarea

在我的html模板中，取決於TYPE的值，我應該加載文本字段（輸入/文本）或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"
    }];

演示小提琴

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>

順便說一句： 我有一個類似的問題...