使用 ng-class 显示一些文本

Question

除了 div 上的临时 class 之外，我可以使用 ng-class 显示文本吗？

这是我的代码。

HTML:

<button ng-click="setBulkMode()"

<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode}">

JS:

$scope.setBulkMode = function() {
                if(!$scope.bulkMode) {
                    $scope.bulkMode = true;
                } else {
                    $scope.bulkMode = false;
                }
            };

每当我将 bulkMode 设置为 true 时，我也想在我的 ng-class 上显示一些文本。所以像...

<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode 'Bulk Mode On'">

但我不太确定该怎么做。有什么想法吗？

Answer 1

尝试以下操作：

 <div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode">

 <span ng-show="bulkMode">Bulk Mode On</span>

而且您不需要设置该功能，您可以在视图中轻松完成此操作：

<button ng-click="bulkMode = !bulkMode">

Answer 2

分开吧。使用 ng-if 指令创建一个新的 div 以有条件地显示它：

<div ng-if="bulkMode">Bulk Mode On</div>

另外，你可以更好地编写你的函数（我个人会把它重命名为 toggleBulkMode）：

$scope.setBulkMode = function() {
     $scope.bulkMode = !$scope.bulkMode;
};

使用 ng-class 显示一些文本

Use ng-class to display some text

javascript

css

angularjs

ng-class