如何将 CSS active class 应用于三个独立列表的项目？

Question

如何将 CSS 活动 class 应用于三个列表中的一个项目？ 我从服务器获取对象列表。这些对象具有属性类型列表。这是一个类似的对象。

[
    {
        name: 'europe',
        countries: ["Englad", "France", "Germany", "Italy"]
    }, {
        name: 'asia',
        countries: ["Japan", "China", "Iran", "Korea"]
    }, {
        name: 'Africa',
        countries: ["Somalia", "Egypt", "Ghana"]
    },
];

默认情况下，列表的第一项处于选中状态。当用户点击另一个项目时，应该在不影响其他列表项目的情况下选择它。

一些可能有用的信息。

上面的对象只是一个例子。将来，我可能会得到一个包含三个以上对象的列表。
控制器只有一个
每个国家都有一个'id'，但我没有包括。
这是 jsfiddle 上这个对象的一个例子 JSFiddle

非常感谢。

Answer 1

基本上你会创建一个对象来保存选择，正如你提到的你的数据是可变的，选择对象的生成应该是动态的。为此，我利用了计算属性名称的 ECMAScript 2015 对象，关于对象初始化器的 MDN 有更多信息。

默认选择也需要初始化。

根据您的 fiddle，这是 html

<div ng-app ng-controller="ContinentController">
  <ul>
    <li ng-repeat="continent in continents">
      <h2>{{continent.name}}</h2>
      <ul>
        <li ng-repeat="country in continent.countries">
          <span ng-class="{active: selected[continent.name] === $index}" 
                ng-click="select(continent.name, $index)">{{country}}</span>
        </li>
      </ul>
    </li>
  </ul>
</div>

和控制器

function ContinentController($scope) {
  $scope.continents = [{
    name: 'europe',
    countries: ["Englad", "France", "Germany", "Italy"]
  }, {
    name: 'asia',
    countries: ["Japan", "China", "Iran", "Korea"]
  }, {
    name: 'Africa',
    countries: ["Somalia", "Egypt", "Ghana"]
  }, ];

  $scope.selected = {};
  $scope.select = select;

  initializeSelection();

  function initializeSelection() {
    for (var i = 0; i < $scope.continents.length; i++) {
      $scope.selected[$scope.continents[i].name] = 0;
    }
  }

  function select(name, index) {
    $scope.selected[name] = index;
  }
}

这是工作 fiddle。

现在假设你们所有的名字都是独一无二的。既然你提到你有 ID，如果它们是唯一的，那么使用它们作为键而不是名称属性肯定会更好。

如何将 CSS active class 应用于三个独立列表的项目？

How to apply CSS active class to an item of three independent lists?

angularjs

angular-controller