2017-01-25 7 views
0

Я новичок в AngularJS, я использую версию 1.6, и я получаю свою информацию из своей базы данных, она работает, но когда я хочу получить доступ к информации JSON не отображает данные.ng-repeat не работает в AngularJS 1.6

Это мой код

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

Но таблица просто пустым, что я делаю неправильно?

+0

Сначала вам нужно преобразовать его в объект из json. – Jenny

+0

показать свой код контроллера. –

ответ

6

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"> 

The autos является ответом на $http запроса. Ответ содержит свойство data для доступа к фактическому отклику, отправленному с сервера. Для доступа к данным ответа используйте response.data.

Другая недвижимость - status, headers, config и statusText.

+0

Спасибо, сейчас он работает, но это что-то о версии angularjs? давно с другой версией 1.5 Я думаю, что увидел пример, где .data его не было – Fixer

+0

@Fixer No. Это не имеет ничего общего с Угловой версией. Насколько я помню, этот формат относится к первой версии AngularJS. – Tushar

+0

Я получаю это сейчас, а что, если я хочу только вернуть информацию без этих свойств? есть разница? – Fixer

2

Вы должны использовать autos.data,

DEMO

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>

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

Рабочая plnkr здесь Plunker

0

в угловых использовании версии 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.