すべての兄弟にクラスを追加する

Question

すべての兄弟にクラスを追加する方法は、クリックされたものを期待しています。私が望むものをクリックすると、クリックした兄弟以外のすべての兄弟にクラスblueを適用したいと思います。

http://jsfiddle.net/bm6kujL1/

<div ng-app="editer" ng-controller="myCtrl" class="container"> 

    <div ng-repeat="item in items"> 

    <div class="wrap" ng-click="show =!show" ng-class="{'blue':show}"> 
     <span>{{item.name}}</span> 
     <span ng-show="show">{{item.thing}}</span> 
    </div> 

    </div> 
</div> 



//JS 
function myCtrl($scope) { 
    $scope.editedItem = null; 

    $scope.items = [{ 
    name: "item #1", 
    thing: "thing 1" 
    }, { 
    name: "item #2", 
    thing: "thing 2" 
    }, { 
    name: "item #3", 
    thing: "thing 3" 
    }]; 

    $scope.show = false; 

} 

var editer = angular.module('editer', []); 


//CSS 
.wrap { 
    background: yellow; 
} 

.blue { 
    background: blue; 
} 

Answer 1

私はあなたのJS fiddleにいくつかの小さな変更を加え、それが機能するようになりました。基本的には、すべてのアイテムの表示という1つの属性しか持っていませんでしたが、それぞれが青色であるかどうかを知る必要がありました。

JS：あなたの答えのための

function myCtrl($scope){ 
    $scope.editedItem = null; 

    $scope.items = [ 
     { name :"item #1", thing: "thing 1", selected: false}, 
     { name :"item #2", thing: "thing 2", selected: false}, 
     { name :"item #3", thing: "thing 3", selected: false} 
    ]; 

    function resetAllItems() { 
     for (i in $scope.items) { 
     $scope.items[i].selected = false; 
     } 
    } 

    $scope.selectItem = function(item) { 
       resetAllItems(); 
       item.selected = true; 
    } 

} 

HTML

<div ng-app="editer" ng-controller="myCtrl" class="container"> 

     <div ng-repeat="item in items"> 

      <div class="wrap" ng-click="selectItem(item)" ng-class="{'blue': item.selected}"> 
      <span>{{item.name}}</span> 
      <span ng-show="item.selected" >{{item.thing}}</span> 
      </div> 

     </div> 
    </div> 

Answer 2

あなたは代わりに関数を使用すると、アイテムにshowプロパティを使用することができます。

HTML：

<div class="wrap" ng-click="toggleShow(item)" ng-class="{'blue':item.show}"> 
    <span>{{item.name}}</span> 
    <span ng-show="item.show">{{item.thing}}</span> 
</div> 

JS：

$scope.items = [{ 
    name: "item #1", 
    thing: "thing 1", 
    show: false 
    }, { 
    name: "item #2", 
    thing: "thing 2", 
    show: false 
    }, { 
    name: "item #3", 
    thing: "thing 3", 
    show: false 
    }]; 

$scope.toggleShow = function(item){ 
    for(var i=0; i<$scope.items.length; ++i){ 
     if($scope.items[i] === item){ 
      $scope.items[i].show = false; 
      continue; 
     } 
     $scope.items[i].show = true; 
    } 
} 

フィドル： http://jsfiddle.net/bm6kujL1/2/