Question

我试图了解angularJs是否对我有用，可以创建团队管理应用程序。

我遇到的问题：我有一个复杂的ng-class定义，

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

任何关于搜索内容或任何代码的提示都将受到赞赏

在这里可以找到我所拥有的js-fiddle： http://jsfiddle.net/mTJDh/1/

来自小提琴的代码用于死链接 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>

JS

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.users = [
        {name: 'PEDC',
        days : [{number:'1', func:'guard'},
                {number:'2', func:'guard'},
                {number:'3', func:'guard'},
                {number:'4', func:['guard','spoc']}
               ]
        },
        {name: 'JOVH',
        days : [{number:'1', func:'guard'},
                {number:'2', func:'guard'},
                {number:'3', func:'spoc'},
                {number:'4', func:'guard'}
               ]
        }
    ];
}

CSS

.pending-delete {
    background-color: pink
}
.guard {
    border:solid black 1px
}
.spoc {
    background-color: pink
}

编辑：

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

http://jsfiddle.net/mTJDh/2/

基本上是：添加函数isGuard，isSpoc和isHoliday给我的控制器，以日为参数这些基于json数组返回true或false。

从这里得到的想法和https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Answer 1

ngClass也接受在scope上定义的返回布尔值的方法。所以你可以这样做：

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

JS

$scope.getClass = function(day){
    return $scope.guard.checked && day.func.indexOf('guard') != -1
}

Answer 2

我更新了你的小提琴：

http://jsfiddle.net/mTJDh/4/

在接受的答案中使用ngClass：

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

但这次重写方法getClasses以返回数组。

数组最后包含您想要特定日期的每个课程。

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

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

http://jsfiddle.net/mTJDh/5/

定义：

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

Answer 3

我会使用一个指令，从你的例子中可以很难说出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类，并使用angular element将它们放在元素上。

这样可以避免使用此逻辑使控制器混乱，并且可以避免在模板中使用大量逻辑。

为表格单元格外化ng-class

3 个答案:

JS