Question

我正在尝试使用ng-class创建自定义类名。我想组合两个范围变量的值来创建该名称。这是我的代码：

HTML：

<body ng-app="programApp" ng-controller="programController">
  <div ng-class="{quarter+number}">This should have a class of '.quarter12'</div>
</body>

JS：

angular.module('programApp', [
    'programApp.controllers',
]);
angular.module('programApp.controllers', [])
    .controller('programController', ['$scope', '$filter', '$http', 
    function($scope, $filter, $http){
      $scope.quarter = 'quarter';
      $scope.number = 12;

    }]);

另见codepen：http://codepen.io/trueScript/pen/NqGzBM

当页面加载时，div元素应该有一个＆＃39; .quarter12＆＃39;类，因为控制器中有相应的变量值。但是，它会抛出错误。我如何让它工作？

Answer 1

var myary = Array.apply(0,Array(N)).map(function(_,i){return i});期望ng-class不expression您可以使用带插值指令的类来满足您的要求。

string

<强>更新

设置属性值的更好，更方便的解决方案是使用<div class="{{quarter+number}}">This shoul have a class of '.quarter12'</div>指令。 ng-attr使用ng-attr插值的评估值创建和归因。

{{}}

Working Codepen

Answer 2

你可以这样做：

HTML：

<div ng-class="getClassName()">This should have a class of '.quarter12'</div>

JS：

angular.module('programApp.controllers', [])
    .controller('programController', ['$scope', '$filter', '$http', function($scope, $filter, $http){
         $scope.quarter = 'quarter';
         $scope.number = 12;

         $scope.getClassName = function() {
             retrun $scope.quarter + $scope.number;
         }
    }]);

http://codepen.io/anon/pen/PqPdmY

Angular ngClass不评估类名

2 个答案: