AngularJS 条件格式 Ng-repeat

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。（当有其他更适合的数据类型时，我还建议不要将模型中的所有值都存储为字符串）

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