Javascript 表单元格的外部化类

我想看看angularJs是否对我创建团队管理应用程序有用

我的问题是： 我有一个复杂的ng类定义

ng-class="{'guard': ( guard.checked && day.func.indexOf('guard') != -1) }"

它将被证明是更大的。 我想知道是否有一种方法可以基本上做到这一点：

# pseudocode, needs to be translated to js/angularJs
function getClasses(){
    classes = ''
    if ('guard' in user.day.func and guardCheckBox == checked){
        classes = classes.append(' guard')
    }
    if ('f2' in user.day.func and f2CheckBox == checked){
        classes = classes.append(' f2')
    }
    ....
    if ('fx' in user.day.func and fxCheckBox == checked){
        classes = classes.append(' fx')
    }
    return(stripLeadingSpace(classes)
}

任何关于搜索内容的提示或任何代码都将不胜感激

在这里可以找到我目前拥有的东西：

从小提琴的代码死链接 HTML: 卫兵

<!--
this snippet applies the class 'guard' to every cell when the checkbox 'Guard' is checked
-->
<div ng-controller="MyCtrl">
    <table ng-repeat="user in users">
        <tr>
            <td>{{user.name}}</td>
            <td ng-repeat="day in user.days" ng-class="{'guard': ( guard.checked && day.func.indexOf('guard') != -1) }">
                {{day.number}}
            </td>
        </tr>
    </table>
</div>

CSS

编辑：

这是我现在使用的实际解决方案：

基本上： 将函数isGuard、isSpoc和isHoliday添加到我的控制器中，并将day作为参数 它们根据json数组返回true或false

---

从这里得到的想法和

我将使用一个指令，从您的示例中很难判断您的CSS规则依赖于哪些范围变量（以及具体的规则是什么），但希望它足以开始

.directive('guardClass', [function() {

    return {
        restrict: 'A',
        scope: {
            guard: '=',
            user: '='
        },
        link: function(scope, element, attrs, controller) {
            scope.$watch(function() {
                //return enough info about scope.guard and scope.user
                //to know when one has changed
                return ...
            }, function() {
                var classes = [];
                if (...) {
                    classes.push('guard');
                }
                if (...) {
                    classes.push('f2');
                }
                ....
                if (...) {
                    classes.push('fx');
                }
                element.attr('class', classes.join(' '));
            });
        }
    };

}])

然后是HTML

<td guard-class guard="guard" user="user" />

您向指令提供计算CSS类所需的两个（或更多）对象。该指令设置一个

$watch

，以便在这些对象上的任何属性发生更改时触发。然后，它会找到所有需要的CSS类，并使用将它们放在元素上

---

这样可以避免控制器被这种逻辑弄得乱七八糟，也可以避免模板中有大量的逻辑。

ngClass

还接受在作用域上定义的返回布尔值的方法。所以你可以这样做：

<td ng-repeat="day in user.days" ng-class="{ 'guard' : getClass(day) }">
    {{day.number}}
</td>

我更新了你的小提琴：

使用公认答案中的

ngClass

：

<td ng-repeat="day in user.days" ng-class="getClasses(day)" day="day">
    {{day.number}}
</td>

如果你想要一个更通用的：

定义：

var availableClasses = [
    "guard",
    "spoc",
    "holiday"]

并使用循环：

$scope.getClasses = function (day) {
    var classes = [];

    angular.forEach(availableClasses, function (value) {
       if ($scope[value] && day.func.indexOf(value) != -1) classes.push(value);
    });
    return classes;
}

---

将这一个标记为答案，即使解决方案变得有点不同。原来的帖子里有修改过的提琴

<td ng-repeat="day in user.days" ng-class="getClasses(day)" day="day">
    {{day.number}}
</td>

$scope.getClasses = function(day){
    var classes = [];

    if($scope.spoc && $scope.isSpoc(day)) classes.push("spoc");
    if($scope.guard && $scope.isGuard(day)) classes.push("guard");
    if($scope.holiday && $scope.isHoliday(day)) classes.push("holiday");

    return classes;
}

var availableClasses = [
    "guard",
    "spoc",
    "holiday"]

$scope.getClasses = function (day) {
    var classes = [];

    angular.forEach(availableClasses, function (value) {
       if ($scope[value] && day.func.indexOf(value) != -1) classes.push(value);
    });
    return classes;
}