Angularjs 使用ng类的带条件的动态类

我正在迭代项目列表，并进行复选框输入。我希望在选中时为其创建一个类，如果未选中，则创建另一个（或不存在）

当前，$scope上有一个数组，用于跟踪项目是否被选中，因此我试图将该条件t放入

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>

每种笑话类型

假设有一些类型{

滑稽

，

海盗

，

敲打

，…}。但是，如果笑话存在于关联数组变量

JokeTypeFilter{full:true，pirate:true，knock-knock:false}

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

ng class=“{{{uniqJoke}}：JokeTypeFilter[uniqJoke]}”

如果条件匹配，它将插入类

uniqJoke

，因此它不起作用：

ng class=“{uniqJoke:JokeTypeFilter[uniqJoke]}”

---

但是我希望div具有

.pirate

如果

JokeTypeFilter[pirate]==true

ng类

属性可以进行控制器函数调用，因此您可以在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;
}

---

您可以在此处阅读有关如何执行迭代的更多信息：

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;
}

---

您可以在此处阅读有关如何进行迭代的更多信息：

一个选项是在

类

属性本身中使用表达式。大概是这样的：

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

---

一个选项是在

类

属性本身中使用表达式。大概是这样的：

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

---

您正在返回文本。项目是动态的，所以我不知道名称。如何动态执行此操作，因为

$scope.jokecsclasses=function（uniqType）{return{uniqType:true}；}

应将字符串literal

uniqType

作为class@chrisFrisina这正是我指出关于

angular.forEach

的原因。您可以使用它动态构建地图。我现在给你加了一个具体的例子。如果调试浏览器，您将看到在每次迭代中，变量

joke

将是列表中的每个笑话类型。您将返回文本。项目是动态的，所以我不知道名称。如何动态执行此操作，因为

$scope.jokecsclasses=function（uniqType）{return{uniqType:true}；}

应将字符串literal

uniqType

作为class@chrisFrisina这正是我指出关于

angular.forEach

的原因。您可以使用它动态构建地图。我现在给你加了一个具体的例子。如果调试浏览器，您将看到在每次迭代中，变量

joke

将是列表中的每个笑话类型。