javascript - AngularJS ng-重复 : show data only when data is not false

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

   {
    "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 - 更快的操作。