Question

如何为所有兄弟姐妹添加课程，期望点击的课程。当我单击我想要的那个时，我想将类blue应用于所有兄弟姐妹而不是我点击的兄弟姐妹。

<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

您可以改用函数并使用项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/

Answer 2

我对您的JS fiddle进行了一些小改动，现在可以正常使用了。基本上，您只有一个名为show for all 项的属性，但您需要知道每个属性是否应为蓝色。

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>

Angular ngclick为所有兄弟姐妹添加类

2 个答案: