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

Posted 2023-03-05

【中文标题】angularjs：依赖于json数据的动态html

【英文标题】：angularjs: dynamic html dependent on json data

【发布时间】：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 帮助很大。

【参考方案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/（谢谢！）