長さが4未満の場合、クラスの要素を非表示にするにはどうすればよいですか？

Question

1、2、3、4にはいくつかの要素がありますが、数字5には句読記号しかありませんので、私はそれを隠したいと思っています。すべてdon't mix AngularJS with normal DOM access, because it won't work (#1)の

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

Answer 1

まず。

product.item(D)(N).ingが時々 JavaScriptで falsy valueに変えることができ 空の文字列 あるよう

はその後、あなたのDOMとあなたのデータ構造を考えると、それが見えます：

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>