Question

我是AngularJS的新用户，我使用的是1.6版，我从我的数据库中获取了我的信息，它正在运行，但当我想访问JSON信息时却没有显示数据

这是我的代码

<div class="row m-t-50">
    {{ autos |json }}
    <div class="col-md-12">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Color</th>
                    <th>Año</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="auto in autos">
                    <td>{{ auto.marca }}</td>
                    <td>{{ auto.modelo }}</td>
                    <td>{{ auto.color }}</td>
                    <td>{{ auto.anio }}</td>
                    <td>{{ auto.precio }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{{ autos | json }}显示了这一点：

{
    "data": [{
        "id": "1",
        "marca": "TOYOTA",
        "modelo": "VC2017",
        "color": "Verde",
        "anio": "2017",
        "precio": "250345"
    }, {
        "id": "2",
        "marca": "NISSAN",
        "modelo": "NS2017",
        "color": "Azul",
        "anio": "2016",
        "precio": "540000"
    }],
    "status": 200,
    "config": {
        "method": "GET",
        "transformRequest": [null],
        "transformResponse": [null],
        "jsonpCallbackParam": "callback",
        "url": "php/obtener-autos.php",
        "headers": {
            "Accept": "application/json, text/plain, */*"
        }
    },
    "statusText": "OK"
}

但桌子只是空白，我做错了什么？

Answer 1

ng-repeat上使用了<tr ng-repeat="auto in autos">。根据给定的数据，重复应该应用于autos.data数组。

使用

<tr ng-repeat="auto in autos.data">

或

在控制器中，将data从响应中分配给autos变量。

$scope.autos = response.data;

并在视图中使用它，因为它是

<tr ng-repeat="auto in autos">

autos是$http请求的回复。响应包含data属性，用于访问从服务器发送的实际响应。要访问响应数据，请使用response.data。

其他属性为状态 - status，headers，config和statusText。

Answer 2

您应该使用 autos.data ，

<强>样本

＆＃13;

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
     $scope.autos ={"data": [ { "id": "1", "marca": "TOYOTA", "modelo": "VC2017", "color": "Verde", "anio": "2017", "precio": "250345" }, { "id": "2", "marca": "NISSAN", "modelo": "NS2017", "color": "Azul", "anio": "2016", "precio": "540000" } ], "status": 200, "config": { "method": "GET", "transformRequest": [ null ], "transformResponse": [ null ], "jsonpCallbackParam": "callback", "url": "php/obtener-autos.php", "headers": { "Accept": "application/json, text/plain, */*" } }, "statusText": "OK" };
   
  }
]);

＆＃13;

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
   <div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Marca</th>
                <th>Modelo</th>
                <th>Color</th>
                <th>Año</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="auto in autos.data">
                <td>{{ auto.marca }}</td>
                <td>{{ auto.modelo }}</td>
                <td>{{ auto.color }}</td>
                <td>{{ auto.anio }}</td>
                <td>{{ auto.precio }}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>

</html>

＆＃13;

Answer 3

  <body ng-controller="MyCtrl">
      <div>
        <div ng-repeat="d in data"> {{ d.marca }}</div>
      </div>
  </body>

在这里工作plnkr Plunker

Answer 4

Angular版本1.6.1中的

使用此示例

你的HTML

<table class="table table-striped">
        <thead>
            <tr>
                <th>Marca</th>
                <th>Modelo</th>
                <th>Color</th>
                <th>Año</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="auto in autos">
                <td>{{ auto.marca }}</td>
                <td>{{ auto.modelo }}</td>
                <td>{{ auto.color }}</td>
                <td>{{ auto.anio }}</td>
                <td>{{ auto.precio }}</td>
            </tr>
        </tbody>
    </table>

你的代码

 $http.get("your url").then(function (response) {
            $scope.cars= JSON.parse(response.data);
        });

不要忘记插入此行 JSON.parse（response.data） 版本1.6.1要求。

ng-repeat在AngularJS 1.6中不起作用

4 个答案: