Question

我有一个SQL查询

从产品中选择*，其中SELLER_USERNAME＆lt;＆gt;'A'ORDER BY GROUP_NAME;

我的sql的输出是这样的：

  ITEM_DESC        | ITEM_PRICE | Group_Name  |
|  44 inches       |        170 | Electronics |
| 8GB DDR3@2.4GHZ  |        300 | Electronics |
| Novel            |         30 | FICTION     |
| ACOUSTIC         |        110 | INSTRUMENTS |
| Captain America  |        110 | TOYS        |
| Marvel Avenger   |         30 | TOYS        |

我在前端使用Angular和bootstrap，想在HTML页面上以这种格式获取数据

HTML上的必需输出

Electronics: 

ITEM_DESC : 44 inches
ITEM_PRICE : 170

ITEM_DESC : 8GB DDR3@2.4GHZ
ITEM_PRICE : 300

FICTION:

ITEM_DESC : Novel
ITEM_PRICE : 30

Toys:
ITEM_DESC : Captain America
ITEM_PRICE : 110

ITEM_DESC : Marvel Avenger
ITEM_PRICE : 30

我以这种格式获得输出：

Electronics: 

ITEM_DESC : 44 inches
ITEM_PRICE : 170

Electronics:
ITEM_DESC : 8GB DDR3@2.4GHZ
ITEM_PRICE : 300

FICTION:
ITEM_DESC : Novel
ITEM_PRICE : 30

Toys:
ITEM_DESC : Captain America
ITEM_PRICE : 110

Toys:
ITEM_DESC : Marvel Avenger
ITEM_PRICE : 30

有没有办法按照第一种方式在HTML上使用ng-repeat组织数据，这样Group_Name只有1个，而属于同一个Group_Name的项目来自Group_Name

请查看我的HTML代码图片

Answer 1

您可以做的是将属性存储在每个组的第一个结果中，例如firstInGroup然后设置ng-show="result.firstInGroup"。见下面的例子：

var app = angular.module('myApp', []);
app.controller('myController', ['$scope',
function($scope) {
  //simulating the data coming from the server-side (database query)
  $scope.myResult = [{
    ITEM_DESC: '44 inches',
    Group_Name: 'Electronics',
    ITEM_PRICE: 170
  }, {
    ITEM_DESC: '8GB DDR3@2.4Ghz',
    Group_Name: 'Electronics',
    ITEM_PRICE: 300
  }, {
    ITEM_DESC: 'Novel',
    Group_Name: 'FICTION',
    ITEM_PRICE: 30
  },{
    ITEM_DESC: 'ACOUSTIC',
    Group_Name: 'INSTRUMENTS',
    ITEM_PRICE: 110
  },{
    ITEM_DESC: 'Captain America',
    Group_Name: 'TOYS',
    ITEM_PRICE: 110
  },{
    ITEM_DESC: 'Marvel Avenger',
    Group_Name: 'TOYS',
    ITEM_PRICE: 30
  }];
  var groupNames = {};
  //process each result, tracking which is the first in each group
  $scope.myResult.forEach(function(result) {
    if (!groupNames.hasOwnProperty(result.Group_Name)) {
      result.firstInGroup = true;
    }
    groupNames[result.Group_Name] = 1;
  });      
}]);

.columnx {
  margin-bottom: 10px;
  }
.groupName {
  color: #2B91AF;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="result in myResult" class="column">
    <div ng-show="result.firstInGroup" class="groupName">{{result.Group_Name}}</div>
    <div class="row">
         <!--<p><strong>Item Name:</strong> {{result.ITEM_NAME}}</p>-->
         <p><strong>Item Description:</strong> {{result.ITEM_DESC}}</p>
         <p><strong>Item Price:</strong> {{result.ITEM_PRICE}}</p>
         <!-- other paragraph tags for other attributes -->
    </div>

  </div>
</div>

如何在Group中的HTML上显示内容

1 个答案: