Как применить активный класс CSS к элементу из трех независимых списков?

Question

Как применить активный класс CSS к одному элементу из трех списков? Я получаю список объектов с сервера. Эти объекты имеют свойство типа list. Вот похожий объект.

[
    {
        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 для Object Initializer есть дополнительная информация.

Выбор по умолчанию также требует инициализации.

Основываясь на вашей скрипке, вот 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;
  }
}

Вот рабочая скрипка.

Теперь это предполагает, что все ваши имена являются уникальными. Поскольку вы упомянули, что у вас есть идентификаторы, если они уникальны, лучше использовать их в качестве ключа вместо свойства name.