javascript - How can I hide the element of the class when the length less than 4? -
1, 2, 3, 4, have element, number 5 has punctuation want hide it.
<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>
first of don't mix angularjs normal dom access, because won't work (#1).
then, considering dom , data structure, looks product.item(d)(n).ing sometimes empty string turned falsy value in javascript:
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 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>
Comments
Post a Comment