如何得到的东西显示在HTML中

集团

选择从产品*，其中SELLER_USERNAME <> 'A' ORDER BY GROUP_NAME;

我的SQL的输出是这样的：

ITEM_DESC  | ITEM_PRICE | Group_Name | 
| 44 inches  |  170 | Electronics | 
| 8GB [email protected] |  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 [email protected] 
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 [email protected] 
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代码的图像与此

来源

2016-10-01 maverick

你可以做的是存储每个组的第一个结果属性，例如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 [email protected]', 
 
    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>

来源

2016-10-02 00:30:12

如何得到的东西显示在HTML中

回答

相关问题