Question

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

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

代码：

// ANGULAR

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 LIST 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 LIST 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>

// OUTPUT 只有初始的“容器”类存在。

//更新感谢给出的答案，jsFiddle显示它应该正常工作，但我的问题是ng-view导致我的$scope出现问题 - 只要将这些动态类和ng视图分开，就会出现问题工作。再次感谢！

Answer 1

尝试做：

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

Answer 2

您的代码中还有两个额外的花括号。这有效：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'}
];

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

2 个答案: