Question

我在应用程序中使用angular，我在我的html页面中显示数据如下：

<div class="orderspresent" ng-cloak="">
 <div class="roworders" ng-controller="allorders" >
  <div class="col-md-3" ng-repeat= "o in orders">
   <div class="sm-st clearfix">
    <div class="sm-st-info">
     <i class="fa fa-square"></i>
      <span>{{o.customerName}}</span>
      <p>1 minutes</p>
      <ul>
        <li ng-repeat= "details in o.details">
        {{details.aantal}} x {{details.productTitle}}
        <br>+ {{details.extras}} 
        </li>     
     </ul>
    </div>
   </div>
  </div>             
 </div>
</div>

JSON SAMPLE

   {
    "49": {
           "orderID": 49,
           "customerID": 61,
           "orderDate": "2015-05-06 10:03:05",
           "orderDeliveryDate": "2015-05-06",
           "orderStatus": "prepare",
           "customerName": "Caroline",
           "details": [
                       {
                         "orderdetailID": 83,
                         "productTitle": "Sexy Teacher",
                         "productPrijs": 4,
                         "aantal": 2,
                         "extras": "Extra syrup, Soya milk",
                         "extrasPrice": 0.6
                       },
                       {
                         "orderdetailID": 84,
                         "productTitle": "Caramel Macchiato",
                         "productPrijs": 5.2,
                         "aantal": 2,
                         "extras": false,
                         "extrasPrice": 0
                      },
                      {
                         "orderdetailID": 85,
                         "productTitle": "The Coach",
                         "productPrijs": 3,
                         "aantal": 3,
                         "extras": false,
                         "extrasPrice": 0
                     },
                     {
                        "orderdetailID": 86,
                        "productTitle": "The Virgin",
                        "productPrijs": 3.2,
                        "aantal": 5,
                        "extras": "Extra syrup, Whipped cream, 3 espresso shots",
                        "extrasPrice": 2.4
                     }
                    ]
                }
    }

正如您在上面的JSON示例中所看到的，{{details.extras}}值有时可能为false。所以现在当我使用{{details.extra}}时，它在我的html中显示为false。但在那种情况下，我不想在那里展示任何东西。只是空白。

如何实现这一目标？

Answer 1

最佳选择是使用ng-if：

<span ng-if="details.extras">+ {{details.extras}}<span>

ng-if从DOM中删除节点。较小的DOM - 更快的操作。

Answer 2

尝试使用ng-show：

<br><span ng-show="details.extras">+ {{details.extras}}<span>

AngularJS ng-repeat：仅在数据不为假时显示数据

2 个答案: