从 JSON-Objects 使用 angularJS HTML 生成答案

【问题标题】：generating with angularJS HTML from JSON-Objects从 JSON-Objects 使用 angularJS HTML 生成
【发布时间】：2015-08-04 12:32:46
【问题描述】：

我正在使用基于 angularjs 的 Ionic 框架开发应用程序。我想让从 JSON 文件生成 HTML 元素或组件。这些是按钮、列表、标签等。

我的 JSON 对象如下所示：

[
  {
    "category": "communicationPage",
    "type": "Button",
    "id": "communicationButton",
    "icon": "ion-chatboxes",
    "name": "Communication",
    "onClick": "window.location.href='communicationPage.html'",
    "ngclick": "open()",
    "ngcontroller": "openctrl",
    "color": "white",
    "background-color": "#ff5db1",
    "font-size": "20px"
  },
  {
    "category": "servicePage",
    "type": "Button",
    "id": "serviceButton",
    "icon": "ion-briefcase",
    "name": "Service",
    "onClick": "window.location.href='servicePage.html'",
    "color": "blue",
    "background-color": "#009900",
    "font-size": "26px"
  }
]

我可以通过我的控制器访问 JSON 文件并解析如下：

myApp.controller('generateHTMLCtrl', function ($scope, $http) {
    $http.get('myJSONFile.json').success(function(data){
        $scope.components = data;
        //...
    });
});

代码当然没有翻译。

我的问题是，如何调整我的 JavaScript 代码，以便从
生成 HTML 元素后的 JSON 对象？：

<button style="color: blue; background-color: #ff5db1; font-size: 20px" onclick="window.location.href='communicationPage.html'" id="communicationButton" class="button"> <i class="ion-chatboxes"></i> <br> Communication </button>

一旦我的 JSON 对象始终位于 JSON 文件中，则应始终在页面上创建 HTML 元素。

第二个问题是如何定位生成的 HTML 元素就在我的 HTML 页面中？

我希望在响应式网格元素之间生成HTML元素，如：

 <div class="row responsive-sm">
    <div class="col">
      <!-- The Button should be generated hier-->
    </div>
 </div>

第三个也是最后一个问题是如何让生成 HTML 适当页面上的元素？如：如果在JSON对象中出现"category": "communicationPage"的键值对，那么对应的HTML元素应该在'communicationPage.html'上创建

我期待一个例子。非常感谢。

【问题讨论】：

为什么要使用<button> 进行重定向而不使用带有href 的<a> 标记？问题 #3 不清楚您在问什么
你是对的。但是在这种情况下，使用<a></a> 会更好，而使用<button></button> 会更糟？
语义和可访问性。仍然不清楚您要做什么
对于问题 #3：我是否可以从目标特定页面上的 JSON 对象自动生成 HTML 元素？当键值对 "category": "communicationPage" 位于我的 JSON 对象中时，此按钮应在名为communicationPage.html 的 HTML 页面上自动生成。我只想在我的 JSON 文件中工作，而不是在 html.page 中使用 HTML 代码。所以我想在我的页面上添加 HTML 元素或通过编辑 JSON 文件从我的页面中删除。所以应该在目标页面上删除或添加组件。
看来您要离开 Angular 单页应用程序并从服务器加载不同的页面。您需要使用 url 查询参数或 localStorage 为其他页面提供数据。其他页面对您的 Angular 应用程序一无所知

标签： json angularjs ionic-framework

【解决方案1】：

对于第一点，使用data-binding 和ng-repeat : 指令

<div class="row reponsive-sm" ng-controller="generateHTMLCtrl">
     <div ng-repeat="component in components">
       <button style="color : {{component.color}}; background-color : {{component.background-color}} ... ">
       </button>
     </div>
</div>

最后一点，我不确定 AngularJS 是否可以实现...

【讨论】：

您能否举个例子，我如何使用来自 json 对象的 ng-controller 和 ng-click 标签的表达式。喜欢ng-click"{{component.ngclick}}" 和ng-controller"{{component.ngcontroller}}"。如果我使用表达式所以我得到错误