I have an array of color IDs and codes that I'm utilizing with ng-repeat in the <li> tag to showcase all colors. However, I only want to display colors where the color code is less than 10, hiding any colors where the color code exceeds 10. Additionally, there is a '+' button that, when clicked, will reveal the hidden colors and switch its icon to '-'. Clicking the button again will hide the colors with a Color Code greater than 10. Here's the code snippet:
<div class="row py-3 border_bootom_1">
<div class="col-lg-2 align-self-center">
<h4 class="card-title"> Color </h4>
</div>
<div class="col-lg-10 align-self-center">
<ul class="ss_size_general ss_size_general_1">
<li class="pointer" ng-repeat="color in $ctrl.parameters.colors">
<a href="#"
ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}"
ng-click="$ctrl.setParameter('colors', color.code.toString())" title="{{color.name}}">
<div class="verticle_center"><span>{{color.label}}</span></div>
</a>
</li>
<li>
<a><div class="verticle_center pointer colorbtn"><i class="fa fa-plus"></i></div></a>
</li>
</ul>
</div>
</div>
$('.colorbtn').click(function () {
$('.colorOpen-content').toggle(200);
var child = $(this).children();
if (child.hasClass('fa fa-plus'))
child.removeClass('fa fa-plus').addClass('fa fa-minus');
else
child.removeClass('fa fa-minus').addClass('fa fa-plus');
return false;
});`