Javascript AngularJS条件格式设置重复

我一直在使用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>

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

然后，此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>

我一直在研究基于数组中的值更改样式的不同方法，但到目前为止，我发现唯一可以与ng repeat结合使用的方法是$first–但是这并不合适，因为这意味着样式始终应用于列表中的第一个产品，即使它没有超过要求价值观

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

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

当产品价格大于200时，此示例将应用类

突出显示

。（我还建议，当存在更适合的其他数据类型时，不要将模型中的所有值都存储为字符串）

{{product.ProductName}}x{{product.Quantity}

英镑{product.ProductPrice}

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

当产品价格大于200时，此示例将应用类

突出显示

。（我还建议，当存在更适合的其他数据类型时，不要将模型中的所有值都存储为字符串）

{{product.ProductName}}x{{product.Quantity}

英镑{product.ProductPrice}

这真的很有帮助，谢谢，我已经能够根据产品的营养属性来设计产品。但是，目前这适用于产品，而不管列表采用哪种排序。理想情况下，我只想在我们根据该属性对列表进行排序时格式化产品，因此高脂肪产品仅在列表按脂肪排序时突出显示，这可能吗？当然可能。试试

ng class=“{highlight:product[sortedBy]>200}”

这真的很有帮助。谢谢，我已经能够根据产品的营养属性来设计产品了。但是，目前这适用于产品，而不管列表采用哪种排序。理想情况下，我只想在我们根据该属性对列表进行排序时格式化产品，因此高脂肪产品仅在列表按脂肪排序时突出显示，这可能吗？当然可能。尝试

ng class=“{突出显示：产品[sortedBy]>200}”

    <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"
            }

<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>