0

我是 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"
}

但是表格只是空白，我做错了什么？

4

4 回答 4

6

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

采用

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

或者

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

$scope.autos = response.data;

并按原样使用它

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

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

其他属性是状态– status、headers和。configstatusText

于 2017-01-25T06:16:13.510 回答
1

你应该使用autos.data,

演示

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" };
   
  }
]);
<!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>

于 2017-01-25T06:19:52.037 回答
0 
  <body ng-controller="MyCtrl">
      <div>
        <div ng-repeat="d in data"> {{ d.marca }}</div>
      </div>
  </body>

在这里工作plnkr

于 2017-01-25T06:22:50.723 回答
0

在 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 需要。

于 2017-02-08T05:31:26.663 回答