AngularJS条件格式Ng-repeat

我一直在使用AngularJS进行演示购物应用程序的工作，我希望能够在篮子页面上列出产品，然后根据一些营养属性对列表进行排序。我对每个属性都有排序功能，使用ng-repeat来遍历项目数组，然后单击ng来排序项目的顺序。AngularJS条件格式Ng-repeat

作为下一步，我想在列表排序时显示产品的一些附加信息。每次对列表进行排序时，我希望排序的属性中超出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一起是$优先 - 但这不合适，因为这意味着样式始终应用于列表中的第一个产品，即使它没有超过所需的值。

TLDR;有谁知道我可以如何将条件格式应用到基于数组内的值的ng-repeat内的项目中？

来源

2016-06-07 user2131710

看看ngClass指令，它将允许您有条件地应用基于模型的类。

这个例子将应用类highlight当产品价格大于200（我也建议不存储所有的值在模型中作为字符串当有更适合其它数据类型）

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

来源

2016-06-07 15:05:51

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

当然是。尝试'ng-class =“{highlight：product [sortedBy]> 200}”' –

AngularJS条件格式Ng-repeat

回答

相关问题