Question

我一直在使用AngularJS制作一个演示购物应用程序，我希望能够在购物篮页面上列出产品，然后根据一些营养属性对列表进行排序。我有一个排序功能适用于每个属性，使用ng-repeat循环遍历项目数组和ng-click来排序项目的顺序。

作为下一步，我想在列表排序时显示有关产品的一些其他信息。每次对列表进行排序时，我都希望在排序的属性中超过X的任何产品都被突出显示，例如也许是红色背景，并显示实际数字。 X以下的任何内容都应正常显示。当列表处于默认视图时，我不希望显示任何此格式。

使用以下下拉列表触发排序：

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    {{sortedBy}}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
     <li><a href="#" event-focus="click" data-value="unsorted" value="unsorted" event-focus-id="ProductID" ng-click="reload()">Default</a></li>
    <li><a href="#" event-focus="click" data-value="Energy" value="Energy" event-focus-id="ProductID" ng-click="order('HealthStats.Energy')">Energy</a></li>
    <li><a  href="#" event-focus="click" data-value="fat" event-focus-id="ProductID" ng-click="order('HealthStats.Fat')">Fat</a></li>
    <li><a href="#" event-focus="click" data-value="saturates" event-focus-id="ProductID" ng-click="order('HealthStats.Saturates')">Saturates</a></li>
    <li><a href="#" event-focus="click" data-value="sugar" event-focus-id="ProductID" ng-click="order('HealthStats.Sugar')">Sugar</a></li>
    <li><a href="#" event-focus="click" event-focus-id="ProductID" ng-click="order('HealthStats.Salt')" data-value="salt">Salt</a></li>
  </ul>

排序使用以下控制器：

app.controller('sortAttribute', function($scope, $http, localStorageService) {  
$scope.basketID = localStorageService.get('basketID');
console.log($scope.basketID);

 $http.get("../api/BasketService?basketId=" +    $scope.basketID)
        .then(function(response){ 
            $scope.products = response.data.BasketContentItemList; 
        })

$scope.predicate = ProductID;
$scope.sortedBy = 'Sort Basket By:'
$scope.reverse = false;
$scope.order = function(predicate) {
$scope.reverse = true; 
$scope.predicate = predicate;
$scope.sortedBy = predicate.substr(12, predicate.length);
};

**我删除了不相关的控制器部分

此ng-repeat然后打印产品名称，数量，价格和图像：

    <div class = "product-list-info-container"  ng-repeat="product in products | orderBy:predicate:reverse"     >

      <div class = "product-image">
            <span class="label label-primary"></span><img ng-src="{{ product.ImageUrl }}" />
      </div>
        <div class="product-name">
            <span ng-style="set_color(attribute)" class="label label-primary" ><!--Description :--></span><p> {{ product.ProductName }} x {{ product.Quantity }}</p>
        </div>
        <div class="product-price">
            <span class="label label-primary"><!--Description :--></span><p> £{{ product.ProductPrice}}</p>
        </div>
    </div>

产品以以下格式退回：

{
"BasketContents": {
    "BasketContentItemList": {
        "ProductInformation": [
            {
                "ProductID": "3257340",
                "HealthStats": {
                    "Energy": "30",
                    "Fat": "0.1",
                    "Salt": "0.1",
                    "Saturates": "0.1",
                    "Sugar": "6"
                },
                "ImageUrl": "../images/340_0000003257340_IDShot_90x90.jpg",
                "ProductName": "Strawberries",
                "ProductPrice": "2.00",
                "Quantity": "1",
                "QuantityOfUnit": "400",
                "UnitOfMeasurement": "G"
            },
            {
                "ProductID": "3250075",
                "HealthStats": {
                    "Energy": "198",
                    "Fat": "19.5",
                    "Salt": "0",
                    "Saturates": "4.1",
                    "Sugar": "0.5"
                },
                "ImageUrl": "../images/075_0000003250075_IDShot_90x90.jpg",
                "ProductName": "AVOCADOS",
                "ProductPrice": "1.75",
                "Quantity": "1",
                "QuantityOfUnit": "1",
                "UnitOfMeasurement": "SNGL"
            }

我一直在研究基于数组中的值来改变样式的不同方法，但到目前为止，我发现的唯一可以与ng-repeat一起使用的东西是$ first - 但是这不适合作为这意味着样式始终应用于列表中的第一个产品，即使它没有超过所需的值。

TLDR;有没有人知道如何根据数组中的值将条件格式应用于ng-repeat中的项目？

Answer 1

查看ngClass指令，它将允许您根据模型有条件地应用类。

当产品价格大于200时，此示例将应用类highlight。（我还建议，当其他数据类型更合适时，不要将所有值存储在模型中作为字符串）< / p>

<div ng-class="{highlight: product.ProductPrice > 200}" class = "product-list-info-container"  ng-repeat="product in products | orderBy:predicate:reverse"     >
  <div class = "product-image">
    <span class="label label-primary"></span><img ng-src="{{ product.ImageUrl }}" />
  </div>
  <div class="product-name">
    <span ng-style="set_color(attribute)" class="label label-primary" ><!--Description :--></span><p> {{ product.ProductName }} x {{ product.Quantity }}</p>
  </div>
  <div class="product-price">
    <span class="label label-primary"><!--Description :--></span><p> £{{ product.ProductPrice}}</p>
  </div>
</div>

AngularJS条件格式化Ng-repeat

1 个答案: