当长度小于4时，如何隐藏类的元素？

Question

1,2,3,4，有一些元素，但是数字5只有标点符号所以我想隐藏它。

＆＃13;

＆＃13;

<div>
  <h4>Ingredients</h4>
  <ul class="list-unstyled">
    <li class="cd">
      <strong>1</strong>
      .{{product.item1[0].ing}}: {{product.item1[0].quantity}}{{product.item1[0].unit}}</li>
    <li class="cd">
      <strong>2</strong>
      .{{product.item2[0].ing}}: {{product.item2[0].quantity}}{{product.item2[0].unit}}</li>
    <li class="cd">
      <strong>3</strong>
      .{{product.item3[0].ing}}: {{product.item3[0].quantity}}{{product.item3[0].unit}}</li>
    <li class="cd">
      <strong>4</strong>
      .{{product.item4[0].ing}}: {{product.item4[0].quantity}}{{product.item4[0].unit}}</li>
    <li class="cd1">
    <strong>5</strong>
      .{{product.item5[0].ing}}: {{product.item5[0].quantity}}{{product.item5[0].unit}}</li>
  </ul>
</div>
<script>var content=document.getElementsByClassName("cd1");if (content.length>1){content.style.display='none';}</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先don't mix AngularJS with normal DOM access, because it won't work (#1)。

然后，考虑到你的DOM和你的数据结构，它看起来像 product.item(D)(N).ing 有时 空字符串，可以在JavaScript中转换为falsy value：

function TestCtrl($scope, product) {
  var vm = $scope;

  vm.items = Object.keys(product);
  vm.product = product;
}

angular
  .module('test', [])
  .controller('TestCtrl', TestCtrl)
  .value('product', {
    item1: {
      ing: 'wine',
      quantity: 75,
      unit: 'ml'
    },

    item2: {
      ing: 'pizza',
      quantity: 2,
      unit: 'g'
    },

    item3: {
      ing: 'pasta',
      quantity: 20,
      unit: 'g'
    },

    item4: {
      ing: '', // ng-show will hide item4
      quantity: 1,
      unit: 'kg'
    }
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
<div ng-controller="TestCtrl">
<ol>
<li ng-repeat="itemName in items"
  ng-init="item = product[itemName]"
  ng-show="item.ing">

  {{item.ing}} - {{item.quantity}} - {{item.unit}}
</li>
</ol>

</div>
</section>