ng-repeat在AngularJS 1.6中不起作用

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

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

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。

你应该使用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>

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

在这里工作 plnkr Plunker

在

Angular 版本 1.6.1 中使用此示例

您的网页

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

相关内容

最新更新

热门标签：