選択したもの以外のすべてのリストアイテムをぼかします

私はアイテムのリストを持っています。ある項目をクリックすると、その項目が展開されます。私は、拡大されたもの以外のすべてのリストアイテムをぼかしたい。ここで選択したもの以外のすべてのリストアイテムをぼかします

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

私のリストには、それはあなたがするのに役立ちます。すなわち、実施例を参照してください

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

ngのリピートに最初以外のすべてのdivにテストクラスを適用します

出典

2016-09-16 Anonymous

あなたは私にあなたのjsfiddle /完全なコードを表示することができますか？私の答えを確認すると、同じことを達成する方法が与えられます。 –

ですあなたのコードの残りの部分。いくつかの項目をクリックすると、その項目のクラスだけが変更されます。

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>

出典

2016-09-16 11:50:59

選択したもの以外のすべてのリストアイテムをぼかします

答えて

関連する問題