html - angularjs:依赖于json数据的动态html

Question

我想以动态方式显示我的 json 模型的内容，具体取决于提供的 json。我用ng-repeat循环遍历我的数据并希望显示一个 html 模板来填充取决于遇到的数据类型的数据。

JSON

{
    "elements": [
        {
            "type": "input-text",
            "desc": "Full Name"
        },
        {
            "type": "input-checkbox",
            "desc": "Accept Terms"
        }
    ]
}

这应该会产生不同的 html 代码，并适当填充 json 内容。

例如

<div><label>Full Name</label> <input type="text"></div>
<div><input type="checkbox"> <label>Accept Terms</label></div>

现在我所做的是使用 angularjs 指令创建一个元素并将 json 值添加到正确的位置。 e.g. element.html('<div><input type="checkbox"> <label>' + scope.item.desc + '</label></div>')这似乎是 jquery 的方式(或更糟)来做到这一点，尽管我想以“正确”的 angularjs 方式来做。

如何根据遇到的 JSON 数据使用不同的 HTML 模板填充内容？

PS:上面的例子是一个简单的例子，遇到的数据远比切换label的位置复杂得多。和input字段。

Answer 1

您需要做的就是在范围上设置数据，然后使用 ng-repeat directive在 HTML 中输出它:

Controller :

.controller('MyData', function ($scope) {
    $scope.myModel = {
        elements: [ { desc: .. }, .. ]
    };
})

您将使用$http service或此 Controller 中的其他适当方法，用数据填充 myModel ，但最终数据需要以某种方式结束在 $scope 对象上。然后模板的工作就是显示该数据:

<div ng-controller="MyData">
    <ul>
        <li ng-repeat="element in myModel.elements">
            {{ element.desc }}
        </li>
    </ul>
</div>