代码之家 › 专栏 › 技术社区 › mahan

如何将CSS活动类应用于包含三个独立列表的项?

angular-controller angularjs

1

mahan · 技术社区 · 7 年前

如何将CSS活动类应用于三个列表中的一个项目?

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

默认情况下,选择列表的第一项。当用户单击另一个项目时,应在不影响其他列表项目的情况下选择该项目。

上面的对象只是一个示例。将来,我可能会得到一个包含三个以上对象的列表。
每个国家都有一个“id”,但我没有包括在内。
下面是这个对象在jsfiddle上的示例 JSFiddle

非常感谢你。

1 回复 | 直到 7 年前

1

Madi 7 年前

MDN

拥有默认选择也需要初始化。

根据你的小提琴,这里是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,如果它们是唯一的,那么使用它们作为键而不是名称属性肯定会更好。