应用基础，Angular，从JSON中显示数据

Foundation For Apps, Angular, Display data from JSON

本文关键字：显示 数据 JSON Angular 应用      更新时间：2023-09-26

我使用的是Foundation for Apps，它包含了AngularJS的一部分。我试图通过控制器访问本地JSON文件的内容，然后将结果渲染为"卡片"。理想情况下，数据集也是可搜索的。

现在我已经简单地实现了一个页面:---名称:结果url:/结果控制器:ProvidersCtrl——

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" class="grid-content">
            {{providers}}
        </div>
    </div>
</div>

controller .js中的代码:

var myApp = angular.module('application',[]);
App.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(res){
        $scope.providers = res.data;
    });
});

这是我的index.html的头部部分:

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Provider Directory</title>
    <link href="/assets/css/app.css" rel="stylesheet" type="text/css">
    <script src="/assets/js/foundation.js"></script>
    <script src="/assets/js/templates.js"></script>
    <script src="/assets/js/routes.js"></script>
    <script src="/assets/js/controllers.js"></script>
    <script src="/assets/js/app.js"></script>
  </head>

我只是不确定我做错了什么，我确定这只是对角度和数据的误解。

参考这里是我的JSON数据(一个示例)。
[
  {
    "specialty": "Cardiovascular Disease",
    "registered": "Sunday, January 25, 2015 5:37 AM",
    "about": "Enim sint dolor sint ad ad proident eiusmod amet et laborum. Commodo esse cupidatat aute do non elit sunt incididunt id cillum eu cupidatat aliquip. Labore id culpa esse qui incididunt pariatur veniam ea ex occaecat anim dolor.'r'n",
    "address": "148 Metropolitan Avenue, Dyckesville, California, 9414",
    "fax": "+1 (844) 572-2968",
    "phone": "+1 (893) 544-2135",
    "email": "gilliam.rosales@fuelton.biz",
    "company": "FUELTON",
    "last_name": "Rosales",
    "first_name": "Gilliam",
    "guid": "aeeb1cb4-92b1-43d2-af9d-8735ab791ea7",
    "index": 0,
    "_id": "55595e5258a89e4168d46cdf"
  },
  {
    "specialty": "Urology",
    "registered": "Friday, November 21, 2014 8:24 AM",
    "about": "Lorem occaecat qui officia duis ad Lorem fugiat ex mollit eiusmod laborum et sit. Laboris proident proident quis aliquip mollit dolor laborum anim aute dolor aliqua irure. Qui sint sit exercitation esse fugiat magna amet amet ut elit elit. Non magna ea dolore aliqua esse qui. Irure elit cupidatat enim cillum dolore. Adipisicing irure sunt sint dolor laboris do. Cillum magna excepteur est nulla nisi id exercitation id officia quis aliqua.'r'n",
    "address": "501 Marconi Place, Shindler, Utah, 1246",
    "fax": "+1 (823) 424-3183",
    "phone": "+1 (976) 574-3689",
    "email": "dickson.flynn@eclipto.tv",
    "company": "ECLIPTO",
    "last_name": "Flynn",
    "first_name": "Dickson",
    "guid": "55189c5b-b0ff-403a-9e54-2db2350fb5d6",
    "index": 1,
    "_id": "55595e529c0a3722914b713a"
  }

编辑:这是我在开发工具中看到的:编辑2:删除了开发工具，当我将控制器移动到app.js时，这些工具被修复了还对json进行了小的修正，从一开始就删除了providers = '。

仍然不显示任何内容:)

更新答案:

var myApp = angular.module('application',[]);
myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('providers.json')
    .then(function(res){
        $scope.providers = res;
    });
});
为模板:

<div class="grid-container">
    <div class="grid-block">
        <div ng-model="providers" ng-repeat="(key, value) in providers" class="grid-content">
            <span>{{key}} : </span><span>{{value}}</span>
        </div>
    </div>
</div>

我有一大堆不正确的东西，到处借用，这是最终的结果:

app.js controller = 

var myApp = angular.module('application');
myApp.controller('ProvidersCtrl', function($scope, $http) {
    $http.get('/providers.json').then(function(res){
      $scope.providers = res.data;
    });
  });

指出:(1) var myApp需要是angular.module('application');，因为这是如何基础的应用程序命名它在app.js的前几行。我写了提供者。为了简单起见，在根目录下创建Json。我去掉了controllers.js文件，只把代码放在app.js中。

results.html = 

---
name: results
url: /results
---
<div class="grid-container">
    <div class="grid-block">
        <div class="grid-content">
            <div ng-controller="ProvidersCtrl">
              {{ providers }}
            </div>
        </div>
    </div>
</div>

(1)我使用ng-controller而不是ng-model来将数据绑定到div。(2)我取消了应用程序在标题中指定控制器的基础惯例。

相关文章：