Javascript 如何使用angularjs将json数据呈现到无序列表中

我试图创建一个清单部分，从服务器上的json文件中读取内容。我已经在一张桌子上看到了如何做到这一点，但是没有太多的运气来制作一个无序的列表。本网站目前使用angular 1.6.1

示例数据和html：

angular.module（'App'，[]）
.controller（'AppCtrl'，函数（$scope）{
$scope.data=[
{“id”：0，
“vin编号”：“空白vin编号”，
“制造商”：“200”，
“型号”：“自行车”，
“车身类型”：“循环”，
“车辆年”：“2006年”，
“stockNum”：“11101”，
“colorExt”：“绿色”，
“里程”：“1”，
“dateEntered”：“08/08/2007”}，
];
});
库存

{{stuff.model}
{{stuff.manufacturer}
{{stuff.vinNum}
{{stuff.bodyType}
{{stuff.colorExt}
{{stuff.yearOfVehicle}
{{stuff.stockNum}
{{stuff.miliety}
{{stuff.dateEntered}

---

现在，这是可行的，没有其他车辆，但一旦你添加另一个车辆，将有两个VIN（每行相同的东西）在一起，而不是分开。我不熟悉使用Angular来制作这样的列表，因此如果有人能帮助我，那将是非常棒的。

问题是使用

ng repeat

和

li

元素来读取对象属性

您可以从

li

中删除

ng repeat

，并将其包装成div格式

（函数（角度）{
"严格使用",；
angular.module（'docsIsolateScopeDirective'，[]）
.controller（'controller'，['$scope'，
职能（$范围）{
$scope.data=[{
“id”：0，
“vin编号”：“空白vin编号”
}, {
“id”：1，
“vinNum”：“vinNum2”
}];
}
]);
})（窗口角度）


{{key}}:{{{value}

您最好一次只将项目数据分组到一个“li”元素中，假设每个“li”都应该是列表中的每个元素，而不是元素的每个属性

试着这样做：

angular.module('App', [])

.controller（'AppCtrl'，函数（$scope）{

$scope.data=[
{“id”：0，
“vin编号”：“空白vin编号”，
“制造商”：“200”，
“型号”：“自行车”，
“车身类型”：“循环”，
“车辆年”：“2006年”，
“stockNum”：“11101”，
“colorExt”：“绿色”，
“里程”：“1”，
“dateEntered”：“08/08/2007”}，
];
});
库存


{{stuff.model}
{{stuff.manufacturer}}
{{stuff.vinNum}}
{{stuff.bodyType}
{{stuff.colorExt}
{{stuff.yearOfVehicle}}
{{stuff.stockNum}}
{{stuff.miliety}}
{{stuff.dateEntered}


您可以使用表格来显示格式良好的搜索和顺序

ngTable很适合这样做：

工作示例：

1 HTML：

 <!-- load script and css for ngtable -->
<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

<div ng-controller="AppCtrl">
  <table ng-table="tableParams" class="table" show-filter="true">
    <tbody>
      <tr ng-repeat="row in $data">
        <td data-title="'id'" filter="{id: 'text'}" filter-data="id" sortable="'id'">{{ row.id }}</td>
          <td data-title="'manufacturer'" filter="{manufacturer: 'text'}" sortable="'manufacturer'">{{ row.manufacturer }}</td>
          <td data-title="'model'" filter="{model: 'text'}" sortable="'model'">{{ row.model }}</td>
          <td data-title="'yearOfVehicle'" filter="{yearOfVehicle: 'text'}" sortable="'yearOfVehicle'">{{ row.yearOfVehicle }}</td>
      </tr>
    </tbody>
  </table>
</div>

你们想做一张桌子吗？若可以的话，我想做一张桌子。若不能的话，我想做一张桌子。但是如果你有一个可靠的方法来制作桌子，我想听听你的建议。它基本上是一个清单页面，将在json文件中显示有关车辆的详细信息。您应该将其设置为一个表格，也不是可读和可排序的aligned@AlainIb你有没有一个链接或例子，我可以看看，看看它看起来怎么样？我更新我的答案，这就像一个魅力。在我删除了我的控制器，移动了我的应用程序名称，并在列表中弹出的示例数据上添加了我的json数据之后，我能用它来填充图像链接吗？如果使用url将图像上载到异地服务器。我使用了你给我的第一个解决方案btw@Ant，我有更新答案，是的，你们可以填充链接。我建议您创建一个函数并返回基于id或其他属性的URL
angular.module('App', [])

$scope.data = [
    {"id":  0,
  "vinNum": "blank-vin-num",
  "manufacturer": "200",
  "model": "BIKE",
  "bodyType": "Cycle",
  "yearOfVehicle": "2006",
  "stockNum": "11101",
  "colorExt": "GREEN",
  "mileage": "1",
  "dateEntered": "08/08/2007"},

];
 });



  <div class="container" ng-controller="AppCtrl">
  <h1>Inventory</h1>

        <ul> 
    <li ng-repeat="stuff in data">
            <div>{{stuff.model}}</div>
            <div>{{stuff.manufacturer}}
            <div>{{stuff.vinNum}}</div>
            <div>{{stuff.bodyType}}</div>
            <div>{{stuff.colorExt}}</div>
            <div>{{stuff.yearOfVehicle}}</div>
            <div>{{stuff.stockNum}}</div>
            <div>{{stuff.mileage}}</div>
            <div>{{stuff.dateEntered}}</div>
    </li>
</ul>

 <!-- load script and css for ngtable -->
<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

<div ng-controller="AppCtrl">
  <table ng-table="tableParams" class="table" show-filter="true">
    <tbody>
      <tr ng-repeat="row in $data">
        <td data-title="'id'" filter="{id: 'text'}" filter-data="id" sortable="'id'">{{ row.id }}</td>
          <td data-title="'manufacturer'" filter="{manufacturer: 'text'}" sortable="'manufacturer'">{{ row.manufacturer }}</td>
          <td data-title="'model'" filter="{model: 'text'}" sortable="'model'">{{ row.model }}</td>
          <td data-title="'yearOfVehicle'" filter="{yearOfVehicle: 'text'}" sortable="'yearOfVehicle'">{{ row.yearOfVehicle }}</td>
      </tr>
    </tbody>
  </table>
</div>

// inject ngtable dependency : ngTable && NgTableParams
 var app = angular.module('App', ['ngTable'])
      .controller('AppCtrl', function($scope, $filter, $q, NgTableParams) {
        var  data = [{"id":0,"vinNum":"blank-vin-num","manufacturer":"200","model":"BIKE","bodyType":"Cycle","yearOfVehicle":"2006","stockNum":"11101","colorExt":"GREEN","mileage":"1","dateEntered":"08/08/2007"},{"id":1,"vinNum":"blank-vin-num 1","manufacturer":"300","model":"BIKE 1","bodyType":"Cycle 1","yearOfVehicle":"2007","stockNum":"11101","colorExt":"GREEN","mileage":"1","dateEntered":"08/08/2007"},{"id":2,"vinNum":"blank-vin-num 2","manufacturer":"400","model":"BIKE 2","bodyType":"Cycle 2","yearOfVehicle":"2008","stockNum":"11101","colorExt":"GREEN","mileage":"1","dateEntered":"08/08/2007"},{"id":3,"vinNum":"blank-vin-num 3","manufacturer":"500","model":"BIKE 3","bodyType":"Cycle 3","yearOfVehicle":"2009","stockNum":"11101","colorExt":"GREEN","mileage":"1","dateEntered":"08/08/2007"                    } ];
        $scope.tableParams = new NgTableParams({page: 1, count: 10}, {data: data});

      })