外化纳克级的表格单元格 [英] externalizing ng-class for table cells

问题描述

我想看看是否angularJs是有用的为我创造一个团队的管理应用程序。

I'm trying to see if angularJs is useful for me to create a team-management application.

问题我有：
我有一个复杂的NG-类的定义，是

The issue I have: I have a complex ng-class definition, being

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

和这将被证明是更大呢。
我不知道是否有办法有基本上是这样：

and it will prove to be bigger yet. I was wondering if there is a way to have basically this:

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

什么搜索任何提示或code中的任何位将AP preciated

any tips on what to search, or any bits of code would be appreciated

一个JS-小​​提琴与我有什么作为然而可以在这里找到：
http://jsfiddle.net/mTJDh/1/

a js-fiddle with what I have as of yet can be found here: http://jsfiddle.net/mTJDh/1/

code
HTML：
    卫队

code from the fiddle for dead links HTML: Guard

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

编辑：

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

This is the actual solution I use now:

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

基本上是：
附加功能isGuard，isSpoc和isHoliday我的控制器，与天作为参数
这些返回true或false基于JSON阵列上。

basically: added functions isGuard, isSpoc and isHoliday to my controller, with the day as an argument these return true or false based on the json array.

从这里 https://docs.angularjs.org得到的想法/ API / NG /输入/输入％5Bcheckbox％5D

推荐答案

ngClass 也接受范围定义了返回一个布尔值的方法。所以，你可以做这样的事情：

ngClass also accepts methods defined on scope which return a boolean value. So you can do something like this:

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

这篇关于外化纳克级的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！