Question

我有一个项目列表。单击一个项目时，它会展开。我想模糊除扩展项目之外的所有列表项。

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

这是我的清单

Answer 1

它将测试类应用于所有div，除了首先进入ng-repeat

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

请参阅工作示例，这将帮助您完成代码中的其他内容。当您单击某个项目时，它将仅更改该项目的类。

＆＃13;

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

＆＃13;

.blur
{
  color:red;  
}

＆＃13;

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

＆＃13;

模糊除选定项目之外的所有列表项

1 个答案: