Angular.js ng-repeat list from *.JSON file

大憨熊 提交于 2019-12-23 07:01:38

问题


I begin learning Angular.js and I have first little problem.

This is my hello.js file:

function Hello($scope, $http) {
  $http.get('URL').
  success(function(data) {
  $scope.response = data
 });}

The response is a *.json file that I need to parse. JSON looks in a way:

"data":[{
   "status":"true",
   "name":"blabla"
},{
   "status":"true",
   "name":"blabla2"
}]

In index.html file I have <div ng-controller="Hello"> where I would like to make a list of all JSON's status and name fields.

I have no idea how could I use ng-repeat in order to make a list of all components from *.json file. Could you help me? :)

Cheers,

Luke


回答1:


If I understood your question properly, and you want to keep your controller as it is, you should do something like:

Html:

<ul>
    <li ng-repeat="resp in response.data"> 
        My Status: {{resp.status}} and my Name: {{resp.name}}
    </li>
</ul>

Hope I've been helpfull.




回答2:


Example: if you assign the json data to a $scope variable in your Controller, then this is one possible way of using ng-repeat to show it in the View:

HTML:

<div ng-app='App' ng-controller="AppCtrl">
  <table>
     <tr>
         <th ng-repeat="(key, val) in data[0]">{{key}}</th>
     </tr>
     <tr ng-repeat="stuff in data">
         <td ng-repeat="(key, val) in stuff">{{val}}</td>
     </tr>
  </table>
</div>

JS:

angular.module('App', [])
.controller('AppCtrl', function($scope) {

    $scope.data = [
        {"status":"true",
          "name":"blabla"},
        {"status":"true",
         "name":"blabla2"}
    ];
});

Output:

name status
blabla true
blabla2 true

EDIT: updated fiddle: http://jsfiddle.net/nndc91cp/2/


or you can create a list this way:
HTML:

<ul>
   <li ng-repeat="stuff in data"> {{stuff.status}} : {{stuff.name}}</li>
</ul>

Output:

  • true : blabla
  • true : blabla2


来源:https://stackoverflow.com/questions/30359413/angular-js-ng-repeat-list-from-json-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!