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-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功能：

$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我的意思是you-approved）后，onclick js无法添加课程request。

我错过了一个重要的细节 - 我将状态更改为项目request.comments，但更改为ng-class="{'you-approved': request.approved}"中存在的项目。所以我不能只写$scope.$apply(function(){$scope.requests = CurrentUserData.getRequests();})

正如@Cyril建议我试图在我的控制器中使用这种代码的和平

$digest already in progress但收到错误$interval。

此外，我尝试使用angualr服务window.setInterval代替每{2}更新集合requests的{{1}}函数，但似乎没有帮助。

Answer 1

怎么样：

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

以下是使用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

看看：

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

你的ng-class表达式不需要返回类属性，而是一个保存带有条件的类名的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代码更新已批准的参数

Ng-Class不检测变化

2 个答案: