AngularJS - 从多个选项更改 1 <div> 上的多个 CSS 类答案

【问题标题】：AngularJS - Change multiple CSS classes on 1 <div> from multiple optionsAngularJS - 从多个选项更改 1 <div> 上的多个 CSS 类
【发布时间】：2014-04-20 06:19:02
【问题描述】：

恐怕我是 Angular 的新手，因此我的知识有限。我希望有一个简单的解决方案，我非常感谢任何帮助。

问题：我有多个下拉列表，所有下拉列表都填充了来自 $scope.list 的数据，当单击其中一个列表时，它会更新变量 $scope.current。我希望在其他地方的容器类中使用 $scope.current 数组数据。

代码：

// 角度

Set the current item
$scope.current = {
    'activeClass1': 'initial-class1',
    'activeClass2': 'initial-class2'
};

Populate the lists
$scope.itemsList1 = [
    {'name': 'foo1'},
    {'name': 'foo2'},
    {'name': 'foo3'}
];

$scope.itemsList2 = [
    {'name': 'bar1'},
    {'name': 'bar2'},
    {'name': 'bar3'}
];

HTML 列表 1

<ul class="dropdown-menu" role="menu">
   <li ng-repeat="item in itemList1">
     <a href="#" ng-click="current.activeClass1=item.name;>{{item.name}}</a>
   </li>
</ul>

HTML 列表 2

<ul class="dropdown-menu" role="menu">
   <li ng-repeat="item in itemList2">
     <a href="#" ng-click="current.activeClass2=item.name;>{{item.name}}</a>
   </li>
</ul>

// 点击以上列表时要更新的 HTML

<div class="container" ng-class="{{current.activeClass1}} {{current.activeClass2}}">
    Note: two classes need to be added to the parent and kept updated 
</div>

// 输出仅存在初始的“容器”类。

// 更新感谢给出的答案，jsFiddle 表明它应该可以工作，但我的问题是ng-view 导致我的$scope 出现问题 - 只要将这些动态类和 ng-view 分开，一切正常。再次感谢！

【问题讨论】：

标签： css angularjs ng-class

【解决方案1】：

您的代码中有两个额外的右花括号。这行得通：http://jsfiddle.net/s7AK7/

$scope.current = {
    'activeClass1': 'initialClass',
    'activeClass2': 'initialClass'
};

$scope.itemsList1 = [
    {'name': 'item1'},
    {'name': 'item2'},
    {'name': 'item3'}
];

$scope.itemsList2 = [
    {'name': 'item1'},
    {'name': 'item2'},
    {'name': 'item3'}
];

【讨论】：

感谢您，我不确定您的 jsFiddle 为什么可以正常工作，但我的实际代码却不行。唔。我相信我会弄清楚并给你接受的答案。

【解决方案2】：

尝试做：

ng-class="[current.activeClass1, current.activeClass2]"

【讨论】：

感谢您的回复。这最初会添加类，但如果单击并更新列表，则容器上的类不会更新。