angularjs：动态 html 依赖于 json 数据

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>') 虽然我想用 'right' angularjs 的方式，但这似乎是 jquery 的方式（或更糟）。

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

PS：上面的例子很简单，遇到的数据远比切换label和input字段的位置要复杂

Answer 1

你需要做的就是在示波器上设置数据，然后在你的HTML中使用ng-repeat directive输出它：

控制器：

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

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

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

Answer 2

一个简单的解决方案似乎是使用具有不同 HTML 路径的 ngSwitch，例如：

<div ng-switch="item.type">
    <div ng-switch-when="input-text">
      <div><label>{{item.desc}}</label> <input type="text"></div>
    </div>
    <div ng-switch-when="input-checkbox">
      <div><input type="checkbox"> <label>{{item.desc}}</label></div>
    </div>
    <div ng-switch-default>Unknown item.type: {{item.type}}</div>
</div>

似乎使用 angularjs 指令的方法（我首先采用）可能是复杂场景的一个很好的解决方案，正如 "Huy Hoang Pham" 在他的博客 post 中指出的那样：http://onehungrymind.com/angularjs-dynamic-templates/（谢谢！）

angularjs：动态 html 依赖于 json 数据

angularjs: dynamic html dependent on json data

html

json

angularjs

angularjs-directive