Angular ngclick为所有兄弟姐妹添加班级

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，和现在的工作。基本上，你只有一个属性叫所有项目显示，但你需要知道每一个，如果它应该是蓝色或不。

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/