angularjs - 单击时，如何处理列表中对象中的重复项，单击时会打开手风琴？

Question

我看了http://codepen.io/ionic/pen/uJkCz。

这是我正在尝试的：http://codepen.io/anon/pen/rxjpwd

基本上，如果我的对象中有重复项，例如 Basketball 出现 3 次，我如何确保在点击时它只会打开那个特定的 Basketball 条目？

    var allGames = {
        "1": "Basketball",
        "2": "Baseball",
        "3": "Basketball",
        "4": "Football",
        "5": "Basketball"
      };
    $scope.games = allGames;

  $scope.toggleGames = function(game) {
    if ($scope.onTapGame(game)) {
      $scope.shown = null;
    } else {
      $scope.shown = game;
    }
  };
  $scope.onTapGame = function(game) {
    return $scope.shown === game;
  };

在我的模板中：

<div ng-repeat="game in games">
        <ion-item class="item item-button-right" ng-click="toggleGames(game)" ng-class="{active: onTapGame(game)}">
          {{game}}          
        </ion-item>
        <ion-item class="item-accordion" ng-show="onTapGame(game)">

        </ion-item>
      </div>

Answer 1

与其使用不必唯一的值，不如使用必须唯一的键。

<div ng-repeat="(key, game) in games">
        <ion-item class="item item-button-right" ng-click="toggleGames(key)" ng-class="{active: onTapGame(key)}">
          {{game}}          
        </ion-item>
        <ion-item class="item-accordion" ng-show="onTapGame(key)">

        </ion-item>
 </div>

和您的 AngularJS 代码：

var allGames = {
    "1": "Basketball",
    "2": "Baseball",
    "3": "Basketball",
    "4": "Football",
    "5": "Basketball"
  };
$scope.games = allGames;

$scope.toggleGames = function(key) {
  if ($scope.onTapGame(key)) {
    $scope.shown = null;
  } else {
    $scope.shown = key;
  }
};
$scope.onTapGame = function(key) {
  return $scope.shown === key;
};

Working Codepen

Answer 2

Ng-repeat 指令在表达式中声明的 $ for each object if there are notrack by 下添加了一个唯一标识符。因此，为确保您使用所需的对象，您可以将代码更改为：

$scope.toggleGames = function(game) {
    if ($scope.onTapGame(game)) {
      $scope.shown = null;
    } else {
      $scope.shown = game.$$hashKey;
    }
  };
  $scope.onTapGame = function(game) {
    return $scope.shown === game.$$hashKey;
  };