Fade all list items other than the one that is selected

Question

Fade all list items other than the one that is selected

I have a group of items in a list. Whenever you click on an item, it expands to show more information. I would like all other items in the list to be blurred except for the one that is expanded.

<li href="#" class="list-group-item" ng-repeat="task in taskVm.tasksdata | orderBy: 'NAME' | filter: search | statusFilter: taskVm.statusArray">
  <div class="row" ng-click="task.isCollapsed = !task.isCollapsed">
    <div class="col-md-5">
      <lable>[[::task.NAME]]</lable>
    </div>
    <div class="col-md-5 offset-md-1">
      <lable ng-class="taskVm.getStateClass(task.STATUS)">[[::task.STATUS]]</lable>
    </div>
    <div class="col-md-2">
      <i ng-click="taskVm.openAlternativeTask(task)" class="fa fa-question-circle-o fa-stack-1x pull-right"></i>
    </div>
  </div>
  <div uib-collapse="task.isCollapsed">
    <hr>
    <div class="row">
      <lable>[[::task.MESSAGE]]</lable>
    </div>
    <div class="row">
      <div class="row" ng-hide="task.M.length ===0">
        <hr>
        <label>Alternatives</label>
      </div>
      <div class="row">
        <ul class="alternatives-list list-group">
          <li class="list-group-item" ng-repeat="alternative in task.M" ng-click="showAlternative(alternative.ID, alternative.SETNUMBER); taskVm.setSelected(alternative.SETNUMBER)" ng-class="{selected: alternative.SETNUMBER === taskVm.idSelectedVote}">[[alternative.SETNAME]]</li>
        </ul>
      </div>
    </div>
  </div>
</li>

These are the items in my list

angularjs twitter-bootstrap css

Answer 1

Answer №1

To style all div elements except the first one within an ng-repeat, you can use the following code:

<div ng-class="{'test': !$first}"></div>

For a practical example and demonstration, refer to the working snippet below. This will guide you on how to apply similar functionality in your own code. By clicking on an item, only that specific item's class will be changed.

var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' },
    { name: 'Item 4' },
    { name: 'Item 5' }
    ];
    $scope.selected = 0;
    $scope.select= function(index) {
       $scope.selected = index; 
    };
});

.blur
{
  color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <body ng-app="myApp" ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items track by $index">
        <a ng-click="select($index)" ng-class="{blur: $index == selected}">{{item.name}}</a>
      </li>
    </ul>
  </body>

Answer 2

To style all div elements except the first one within an ng-repeat, you can use the following code:

<div ng-class="{'test': !$first}"></div>

For a practical example and demonstration, refer to the working snippet below. This will guide you on how to apply similar functionality in your own code. By clicking on an item, only that specific item's class will be changed.

var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' },
    { name: 'Item 4' },
    { name: 'Item 5' }
    ];
    $scope.selected = 0;
    $scope.select= function(index) {
       $scope.selected = index; 
    };
});

.blur
{
  color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <body ng-app="myApp" ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items track by $index">
        <a ng-click="select($index)" ng-class="{blur: $index == selected}">{{item.name}}</a>
      </li>
    </ul>
  </body>

Fade all list items other than the one that is selected

Answer №1

Similar questions

Error: Compilation was unsuccessful due to module not found. Unable to resolve in ReactJS

The compatibility issue with Bootstrap Select 1.13.1 persists, despite being implemented alongside Bootstrap 4

Using Material UI, I have styled a typography element and a button to appear on the

Aligning text of different sizes vertically in CSS

Can you recommend a resource that provides a comprehensive breakdown of which CSS elements are compatible with each internet

Create multiple buttons with uniform width by adjusting padding in CSS

ng-map displays a portion of a map within the user interface

One way to access the method `.name` in Angular 1.5 is by using the

Is there a way to define the browser size before initiating my protractor test?

Angular animation will be triggered when the user clicks using ng-click

Integration of AngularJS with PHP for Seamless User Authentication

Establish the API URL according to the configuration settings in the Web.config file

What Is Preventing my Bootstrap Tabs from Displaying their Content?

How can I ensure a div expands over another element when hovering the mouse?

Broken links - Dreamweaver CS4

Using inline-block can be effective on certain occasions

Delay the fading in of an element using jQuery

Adjust the width of the mosaic layout to a 50% / 50% ratio

Blending AngularJs Widget with Adobe Captivate for Enhanced Interactivity

How to Update a Nested Document in Mongoose