Question

对不起我的英语，如果不是很好，

我是棱角分明的新人，所以我可能做错了什么。

我在这里阅读了一些帖子，但是我找不到任何有关ng-class的结果的解决方案。

这是我的代码：

我的控制器......

function ItemCtrl($scope, Item) {
    var items = Item.all();
    for(var i = 0, ln = items.length; i < ln; i++) {
        if(moment(items[i].enddate).isBefore(moment(), 'day')) {
            items[i].ended = true;
        } else {
            items[i].ended = false;
        }
    }
    $scope.items = items;
}

我的html模板（通过routeProvider链接到我的控制器）......

    <ul>
        <li ng-repeat="item in items">
            <div class="col-xs-8">
                <a ng-class="{endeditem: item.ended}" href="#/item/{{item._id}}">{{item.name}}</a>
            </div>
            <div class="col-xs-1 right">end:</div>
            <div class="col-xs-2 right">{{item.enddate | moment:'LL'}}</div>
        </li>
    </ul>

我想要的是列出所有项目并将'enditem'css规则放在已结束的项目上。

此代码显示我的项目列表但不会在已结束的项目上添加'endsitem'类，除非我进入调试模式并逐步执行...（我在'for'上放置一个断点控制器）。

我确切地说，当我检查项目列表的内容时，其中一些属性已经结束：true和其他一些结束：false。

有人可以帮我理解我做错了吗？

Answer 1

ngClass的语法是

public void selectAspectEvent(SelectEvent event) {
    AppAspect aspectParam = (AppAspect) event.getObject();
    if(aspectParam!=null){
        this.selectedAspect = aspectParam;
    }
}

其中表达式的结果可以是一个字符串，表示空格分隔的类名，数组或类名到布尔值的映射。

对于地图，其值为真值的属性的名称将作为css类添加到元素中。

在您的情况下，您可以使用

<ANY ng-class="expression">...</ANY>

Answer 2

如果Item.all()返回你提到的一个promise，那么你需要与传递给.then()的回调函数中的items数组进行所有交互，如下所示：

function ItemCtrl($scope, Item) {
    Item.all().then(function (items) {
        for(var i = 0, ln = items.length; i < ln; i++) {
            if(moment(items[i].enddate).isBefore(moment(), 'day')) {
                items[i].ended = true;
            } else {
                items[i].ended = false;
            }
        }
        $scope.items = items;
    });
}

Answer 3

最后，在你的帮助和一些研究中，我做到了这一点：

function ItemCtrl($scope, Item) {
    var items = Item.all(function() {
        for(var i = 0, ln = items.length; i < ln; i++) {
            if(moment(items[i].enddate).isBefore(moment(), 'day')) {
                items[i].ended = true;
            } else {
                items[i].ended = false;
            }
        }
    });
    $scope.items = items;
}

感谢您的帮助; - ）

Answer 4

我认为你无法正确使用ng-class，应该是这样的：

ng-class="{true: 'endeditem', false: ''}[item.ended]"

HTML：

 <ul>
        <li ng-repeat="item in items">
            <div class="col-xs-8">
                <a ng-class="{true: 'endeditem', false: ''}[item.ended]" href="#/item/{{item._id}}">{{item.name}}</a>
            </div>
            <div class="col-xs-1 right">end:</div>
            <div class="col-xs-2 right">{{item.enddate | moment:'LL'}}</div>
        </li>
    </ul>

希望它可以帮到你！

Answer 5

ng-class的使用不正确。详细的方法，我建议如下链接。

https://scotch.io/tutorials/the-many-ways-to-use-ngclass

在你的情况下， ng-class="{true: 'endeditem', false: ''}[item.ended]"应该有用。

Angular ng-class奇怪的结果

5 个答案: