Ng级无法检测到变化

Question

On page I have ng-repeat which iterates through items in collection. Every item has property status according to which I add some class or don't. And every item has button, onclick it change item status and make PUT request to API.

As my collection on page is updated every 2 minutes, I have problem after few updates. After 5-6 minutes I make click on button, which make PUT request (successful), but my ng-class function doens't detect that status of item is changed.

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

and JS-code

$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 function :

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

So as result after few updates of my collection ( requests collection I mean) onclick js isn't able to add class you-approved .

---

I've missed one imporatnt detail - I change status not to item request but for item, that exists in request.comments . So I can't just write ng-class="{'you-approved': request.approved}"

---

As @Cyril suggested I've tried to use this peace of code in my controller

$scope.$apply(function(){$scope.requests = CurrentUserData.getRequests();}) but receive error $digest already in progress .

Also I've tried to use angualr service $interval instead of window.setInterval function that updates collection requests every 2 minutes, but it doesn't seem to help.

Answer 1

How about:

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

Here is an example of that logic using a plunker:

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>

Controller 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

have a look at:

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

your ng-class expression doesnt need to return the class property but a json that holds the class name with a condition

so change

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

to:

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

and JS-code update the approved parameter