Question

我正在尝试创建一个从服务器上的json文件读取的库存部分。我已经看过如何在一张桌子上做到这一点，但是制作一个无序列表却没有多少运气。该网站目前使用的是角1.6.1

示例数据和html：

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

    $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">{{stuff.model}}</li>
        <li ng-repeat="stuff in data">{{stuff.manufacturer}}</li>
        <li ng-repeat="stuff in data">{{stuff.vinNum}}</li>
        <li ng-repeat="stuff in data">{{stuff.bodyType}}</li>
        <li ng-repeat="stuff in data">{{stuff.colorExt}}</li>
        <li ng-repeat="stuff in data">{{stuff.yearOfVehicle}}</li>
        <li ng-repeat="stuff in data">{{stuff.stockNum}}</li>
        <li ng-repeat="stuff in data"> {{stuff.mileage}}</li>
        <li ng-repeat="stuff in data"> {{stuff.dateEntered}}</li>
    </ul>

现在这个工作没有其他车辆，但是一旦你添加了另一辆车，就会有两个vinNums（每一行都是一样的）而不是分开。我是新手使用Angular制作这样的列表，所以如果有人可以帮助指导我那将是非常棒的。

Answer 1

问题区域是使用ng-repeat和li元素来读取对象属性。

您可以从ng-repeat删除li，并将其包装在 div 中

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

OR，

您可以使用嵌套的ngRepeat，因为$scope.data是一个数组，可以使用ng-repeat="stuff in data"进行迭代，然后在第二次迭代中可以迭代属性。

<div ng-repeat="stuff in data">
    <ul> 
        <li ng-repeat="(key, value) in stuff">{{key}}:{{value}}</li>
    </ul>
</div>

(function(angular) {
  'use strict';
  angular.module('docsIsolateScopeDirective', [])
    .controller('Controller', ['$scope',
      function($scope) {
        $scope.data = [{
          "id": 0,
          "vinNum": "blank-vin-num"
        }, {
          "id": 1,
          "vinNum": "vinNum2"
        }];
      }
    ]);

})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
    <div ng-repeat="stuff in data">
      <ul>
        <li ng-repeat="(key, value) in stuff">{{key}}:{{value}}</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

您最好只将项目数据分组到一个＆＃34; li＆＃34;一次一个元素，让我们说每一个＆＃34; li＆＃34;应该是列表中的每个元素，而不是元素的每个属性。

尝试这样的事情：

angular.module('App', [])

.controller（＆＃39; AppCtrl＆＃39;，功能（$ scope）{

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

Answer 3

您可以使用表格通过搜索和订单显示良好的格式

ngTable很不错：http://ng-table.com/#/

工作示例： https://plnkr.co/edit/JNKBydXCLtxuvQykirUL?p=preview

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>

2 JAVASCRIPT

// 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});

      })

如何使用angularjs将json数据渲染为无序列表

3 个答案: