angularjs：依赖于json数据的动态html答案

【问题标题】：angularjs: dynamic html dependent on json dataangularjs：依赖于json数据的动态html
【发布时间】：2015-05-31 11:29:44
【问题描述】：

我想根据提供的 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字段的位置复杂。

【问题讨论】：

你可以使用资源来获取json，如果你想使用不同的json，你可以这样做.../:name.json。似乎这是正确的例子docs.angularjs.org/tutorial/step_08。
onehungrymind.com/angularjs-dynamic-templates 这应该是你想要的。
仅供参考：我知道如何 http.get() json，填充我的范围并在元素上 ngRepeat，只是使用不同 HTML 块（带数据）的部分困扰着我。感谢 @Huy 链接您的有用文章以及那里的 cmets 帮助很大。

标签： html json angularjs angularjs-directive

【解决方案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>

【讨论】：

【解决方案2】：

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

<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”在他的博客文章中指出的那样：http://onehungrymind.com/angularjs-dynamic-templates/（谢谢！）

【讨论】：