如何将此范围变量绑定到 ng-class 属性？

Question

这看起来应该相当简单，但我完全没有选择

在我看来我有：

<div>{{selectedTheme.theme}}</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent"></ion-nav-view>

其中第一个 div 按预期输出 class。但是，我无法将 class 插入到 ion-nav-view 元素中！

结果加价如下：

<div class="ng-binding">Dark</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">></ion-nav-view>

任何输入都将是巨大的！

PS：此外，简单地用class设置就可以了。

Answer 1

在 Angular ng-class中使用表达式或只是一个普通的旧字符串。您可以执行以下操作：

Add/Remove classes 基于 Angular 变量
Add/Remove classes 基于计算的表达式
根据动态数据绑定单个或多个classes

您只需将一个 Angular 变量添加到 ng-class，这就是将用于该元素的 class。因此，在您的情况下，如果 selectedTheme.theme 产生您希望使用的确切 class 名称，那么它应该可以正常工作。

<ion-nav-view ng-class="varHoldingClassName" name="menuContent"></ion-nav-view>

所以这里有一个完整的例子：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Angular!';
    $scope.selectedTheme = {
         'coalTheme': 'textColor'
    };
}

.textColor{
    color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <div ng-class="selectedTheme.coalTheme">Hello, {{name}}!</div>
</div>
</div>

如何将此范围变量绑定到 ng-class 属性？

How do I bind this scope variable to a ng-class attribute?

javascript

angularjs

ionic-framework