toggle visibility of <li> elements using ng-repeat and conditional rendering

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;
});`
cssangularjs

Answer №1

Give this a shot

`

<div ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0}"
ng-style="{{color.code}} >= 10 ? {'display': 'hide !important'} : {'display': 'block !important'}"></div>

`

Answer №2

If you're looking to filter data in AngularJS, you can utilize the filter function. Here is an example of how you can achieve this:

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.lt10 = true;
  $scope.colors = [{
      code: 1,
      name: 'red',
      label: 'Red'
    },
    {
      code: 2,
      name: 'blue',
      label: 'Blue'
    },
    {
      code: 30,
      name: 'green',
      label: 'Green'
    },
    {
      code: 40,
      name: 'yellow',
      label: 'Yellow'
    }
  ];


  $scope.toggleShow = function() {
    $scope.lt10 = !$scope.lt10;
  };

  $scope.setParameter = function() {

  };

  $scope.myFilter = function(itm) {
    if ($scope.lt10 && itm.code < 10) return true;
    if (!$scope.lt10 && itm.code >= 10) return true;
    return false;
  };

});
<html ng-app="app">

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

<body ng-controller="MainCtrl">
  <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 colors|filter: myFilter">
          <a href="#" ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}" ng-click="setParameter('colors', color.code.toString())" title="{{color.name}}">
            <div class="verticle_center"><span>{{color.label}}</span></div>
          </a>
        </li>
        <li>
          <a>
            <div ng-click="toggleShow()" ng-show="lt10" class="verticle_center pointer colorbtn">+ PLUS +</div>
            <div ng-click="toggleShow()" ng-show="!lt10" class="verticle_center pointer colorbtn">- MINUS -</div>
          </a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

Acquiring a document from Mongoose using Angular

After successfully uploading a file and storing it in my MongoDB, I now need to implement the functionality to download this file from the same MongoDB. On the server-side, I am utilizing the GridFS module in Mongoose for both upload and download operation ...

angularjsnode.jsmongodbmongoose

Personalize the loading bar using JavaScript

Currently, I am utilizing a basic progress bar from Bootstrap. However, I have the desire to design a custom progress bar similar to this: Unfortunately, I am uncertain about how to create such a unique progress bar. Perhaps there is an existing JavaScri ...

javascriptjqueryangularjstwitter-bootstrap

Getting rid of background color in a tooltip using Material UI

I'm currently tackling an issue with Material UI's tooltip. I can't seem to find a way to make the background of the tooltip completely transparent. By default, it displays with a grey background and white text. Changing the background color ...

javascriptcssreactjsmaterial-ui

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Let me start by sharing some details about my machine setup: Operating System: CentOS 7 Graphics Drivers: kmod-nvidia (dedicated GPU) I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image&apo ...

javascriptcssselenium-webdriverphantomjsnightwatch.js

AngularJS: Changing color property using toggle when a CSS class is modified

After starting to learn AngularJS, I have been able to find many helpful answers on this forum. However, there is one particular issue that has been causing me frustration. My goal is to dynamically change the color property of an element only when it has ...

javascriptjqueryangularjs

Deciphering the mechanics behind the $watch function

I'm struggling to grasp the concept of $watch through an example, but I can't seem to get it working. In this scenario, I am trying to watch changes in an array named favorites within the $scope. Whenever the favorites array is updated, my goal i ...

angularjs

Tips for controlling input length using ng-pattern

Currently, I am working on validating phone numbers through ng-pattern. While researching online resources, I came across the following pattern: ng-pattern="/^\+?\d{0,1}?\d{1,10}$" I would appreciate it if someone could explain the signif ...

angularjs

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

htmlcssformsresponsive-design

Revise directive following the dynamic addition of elements

My Objective: I aim to utilize directives for creating custom elements and dynamically inserting them into the view at various points in time. The Challenge: Upon dynamically adding custom elements to the view, they appear as raw HTML without the directi ...

javascriptjqueryhtmlangularjsangularjs-directive

Proper positioning of popover ensures it does not exceed the boundaries of its parent

In my ngprime table, the header row contains a column field with a popover set to display at the top. However, it is covering the actual field instead of appearing above it. This issue arises because the popover cannot display outside of its parent div, ca ...

cssangularprimeng

Adjust the height of the list when including or excluding floated list items that are not in the final row

Within my ul are li elements with varying widths that wrap around inside a container into multiple rows. When removing an li element from the ul, I want the container's height to adjust dynamically in case a row is eliminated. If the removal happens ...

javascriptjqueryhtmlcss

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

javascriptjquerycssasp.net-mvcasp.net-ajax

Adapting the column width to display or hide content with CSS styling

I have a row with 2 columns. The left column contains my main content and the right column is a chatroom. I would like users to be able to minimize and open the chatroom, which I already know how to do. However, when the chatroom is open, I want the left ...

javascripthtmlcss

What is the best way to use HTML and CSS to center images and headings on a webpage?

This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...

htmlcsspositionalignmentcenter

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

javascripthtmlcssvue.js

The "405 method not supported" exception pops up exclusively for Angular/HTML/JSP resources within a Spring Boot application

My Spring Boot and AngularJS application is encountering an issue when trying to access a REST service with a POST method. Interestingly, I am able to successfully hit the service wherever POST is configured for request mapping. However, when attempting t ...

angularjsspringspring-boot

jQuery - Enhancing User Experience with Dynamic Screen Updates

Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...

javascriptjqueryhtmlcss

The orderBy function is not functioning properly when used in conjunction with ng

I attempted to replicate the functionality demonstrated here, which involves organizing an array of objects in the view using the filter orderBy. While my code is functioning properly, when I apply the orderBy filter, nothing appears in the view. You can ...

javascriptangularjs

The Google Share button may fail to be displayed correctly if it was initially hidden

Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...

jquerycssgoogle-plus