如何得到的東西顯示在HTML中

Question

集團

我有一個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  | 

我使用的角度和引導在前端，並希望得到這種格式的數據的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-重複來組織數據按第一種方式對HTML，以便組名來唯一的，屬於同一組名的項目來自該組名內

隨函附上我的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>