Question

我正在迭代一个项目列表，并进行复选框输入。我希望在检查时有一个类，如果未选中则需要另一个（或没有）。

目前$ scope上有一个数组跟踪是否检查了项目，所以我试图将该条件放在ng-scope中，但语法似乎有问题：< / p>

在这个例子中，如果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 =＆＃34; {{{uniqJoke}}：JokeTypeFilter [uniqJoke]}＆＃34;

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

ng-class =＆＃34; {uniqJoke：JokeTypeFilter [uniqJoke]}＆＃34;

但我希望div .pirate JokeTypeFilter[pirate] == true。

Answer 1

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

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

Answer 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

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

2 个答案: