Question

我正在使用基于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"
  }
]

我可以通过我的Controller访问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"的键值对，则应在'communicationPage.html'上创建相应的HTML元素

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

Answer 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-Objects

1 个答案: