如何在组中的 HTML 上显示内容答案

【问题标题】：How to get things display on HTML in Group如何在组中的 HTML 上显示内容
【发布时间】：2016-10-02 08:39:37
【问题描述】：

我有一个 SQL 查询

从 SELLER_USERNAME'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

有没有办法使用 ng-repeat 按照 HTML 上的第一种方式组织数据，以便 Group_Name 只出现在 Group_Name 中，属于同一 Group_Name 的项目在 Group_Name 中

请在附件中找到我的 HTML 代码图片

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案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>

【讨论】：