使用 ng-class 的带有条件的动态类答案

【问题标题】：Dynamic class with conditionals using ng-class使用 ng-class 的带有条件的动态类
【发布时间】：2014-07-01 03:30:53
【问题描述】：

我正在遍历项目列表，并进行复选框输入。我想在检查时有一个类，如果未选中，我想有另一个（或不存在）。

目前 $scope 上有一个数组可以跟踪项目是否被选中，所以我试图将条件放在ng-scope 中，但语法似乎有问题：

在本例中，如果 uniqJoke 存在，则 css 类 .test 将出现，当然它总是如此，因为我们正在迭代它们：

  <div class="col-md-6" ng-repeat="uniqJoke in uniqJokeTypes">
    Each Joke Type
    <div class="type-filter-button type-filter-button-{{uniqJoke}}" ng-class="{test: uniqJoke}" ng-click="jokeTypeClick(uniqJoke)">
      <label ng-bind="uniqJoke"></label>
      <!-- <input type="checkbox" ng-model="JokeTypeFilter[uniqJoke]" hidden/> -->
      <input type="checkbox" ng-model="uniqJoke" hidden/>
    </div>
  </div>

假设有一些类型 {funny, pirate, knock-knock, ...}。但是我将如何根据关联数组变量JokeTypeFilter{ funny:true, pirate:true, knock-knock:false }中是否存在笑话来动态添加css类@

以下不起作用（语法错误）：

ng-class="{ {{uniqJoke}}: JokeTypeFilter[uniqJoke] }"

并且这个 ownt 工作，因为如果条件匹配，它将插入类 uniqJoke：

ng-class="{ uniqJoke: JokeTypeFilter[uniqJoke] }"

但如果JokeTypeFilter[pirate] == true，我希望div 有.pirate。

【问题讨论】：

标签： angularjs ng-class

【解决方案1】：

一个选项是在class 属性本身中使用表达式。像这样的：

 class="type-filter-button type-filter-button-{{uniqJoke}} {{JokeTypeFilter[uniqJoke]?uniqJoke:''}}"

【讨论】：

【解决方案2】：

ng-class 属性可以接受控制器函数调用，因此您可以在 HTML 属性中执行以下操作：

ng-class="jokeCssClasses()"

然后，在您的控制器中，定义返回笑话名称和值映射的函数调用：

$scope.jokeCssClasses = function() {
    return { funny:true, pirate:true, knock-knock:false };
};

通过该函数，您可以使用angular.forEach 或任何您喜欢的迭代机制从笑话类型列表中构造一个映射。

更新：这里是为了说明我从angular.forEach '构建地图' 的意思。假设$scope.uniqJokeTypes是一个数组，你可以这样做：

$scope.jokeCssClasses = function() {
    var map = {};
    angular.forEach($scope.uniqJokeTypes, function(joke) {
        map[joke] = true;
    });
    return map;
}

您可以在此处阅读有关如何进行迭代的更多信息：https://docs.angularjs.org/api/ng/function/angular.forEach

【讨论】：

您正在返回文字。这些项目是动态的，所以我不知道名称。如何动态地做到这一点，因为$scope.jokeCssClasses = function(uniqType) {return { uniqType:true };} 应该将字符串文字uniqType 作为一个类返回
@chrisFrisina 这正是我指出angular.forEach 的原因。您可以使用它来动态构建地图。我现在只是给你添加了一个具体的例子。如果您调试浏览器，您会看到在每次迭代中，变量 joke 将是列表中的每个笑话类型。