Ng-Class不会检测到更改

Question

在页面上，我有一个ng-repeat，它遍历集合中的项。每个项目都有属性status，我根据属性添加类或不添加类，并且每个项目都有按钮，点击它更改项目状态并向API发出PUT请求。

由于我的收集在页面上每2分钟更新，我有问题后，几次更新。5-6分钟后，我点击按钮，使PUT请求(成功)，但我的ng-class函数没有检测到项目的status被更改。

<div class="one-third" ng-repeat="request in requests track by request.id">
        <div class="incoming_request" ng-class="actionClass(request)">
            <h2 ng-class="DayTypesClasses[request.typeId]" ng-bind="request.type"></h2>
            <hr>
            <div class="request_description">
                <p><span>Description:</span></p>
                <p ng-bind="request.baseComment"></p>
            </div>
            <div class="request_resolve">
                <hr>
                <div class="textarea-holder">
                    <textarea placeholder="Your comment..." ng-model="request.newComment" ng-model-options="{ updateOn: 'default blur'}"></textarea>
                </div>
                <div class="button-container">
                    <button ng-click="approve(request);" class="btn btn-primary">Confirm</button>
                    <button ng-click="reject(request);" class="btn btn-default pull-right" am-hide-request-resolve-div>Reject</button>
                </div>
            </div>
        </div>
</div>

和JS-代码

$scope.approve = function (request) {
        var status = State.APPROVED;

        var currentUserComment = request.comments.filter(function(comm) {
                return comm.userId == user.id && comm.status == "Pending";
            })[0];
        currentUserComment.status = status; //change status
        currentUserComment.text = request.newComment;

        delete request.newComment;

        if (!currentUserComment) {
            request.isProcessing = false;
            return;
        }

        Comments.update(currentUserComment, function() {
            // $rootScope.$broadcast('daysUpdated');   
        });

        request.isProcessing = false;
    };

Ng-class函数：

$scope.actionClass = function(request) {
        var currentUserComment = request.comments.filter(function(comment) {
            return comment.userId == user.id;
        })[0];
        //after click here status for every item isn't changed. Tested in debug mode
        if (!currentUserComment || currentUserComment.status == State.APPROVED || currentUserComment.status == State.REJECTED) {
            return 'you-approved';
        }
    }

因此，在对我的集合(我的意思是requests集合)进行了几次更新之后，onclick js无法添加类you-approved。

我错过了一个重要的细节-我改变状态不是项目request，而是项目，这是存在于request.comments中。所以我不能只写ng-class="{'you-approved': request.approved}"

正如@Cyril建议的那样，我尝试在我的控制器中使用这种代码的宁静

$scope.$apply(function(){$scope.requests = CurrentUserData.getRequests();})，但接收错误$digest already in progress。

此外，我尝试使用angualr服务$interval，而不是每2分钟更新一次集合requests的window.setInterval函数，但这似乎没有帮助。

Answer 1

不如：

ng-class="{'you-approved': !currentUserComment || currentUserComment.status == State.APPROVED || currentUserComment.status == State.REJECTED}"

下面是使用柱塞的逻辑示例：

https://plnkr.co/edit/hoTnrLBAibMJ0wd2WMzm?p=info

HTML：

<button ng-click="setApproved()">Set Approved</button>
<button ng-click="setRejected()">Set Rejected</button>
<button ng-click="setSomethingElse()">Set Something Else</button>

<hr />

<span ng-class="{'you-approved': !currentUserComment || currentUserComment.status == 'approved' || currentUserComment.status == 'rejected'}">Test</span>

控制器JS：

 $scope.setApproved = function(){
      $scope.currentUserComment = {
        status: 'approved'
      }
  }

  $scope.setRejected = function(){
      $scope.currentUserComment = {
        status: 'rejected'
      }
  }

    $scope.setSomethingElse = function(){
      $scope.currentUserComment = {
        status: 'somethingElse'
      }
  }

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

看一下：

https://docs.angularjs.org/api/ng/directive/ngClass

您的ng类表达式不需要返回类属性，而需要返回带有条件的类名称的json。

所以改变

<h2 ng-class="DayTypesClasses[request.typeId]" ng-bind="request.type"></h2>

至：

<h2 ng-class="{'you-approved': request.approved}" ng-bind="request.type"></h2>

和JS-code更新已批准的参数。