ng-class not responding to model update

Question

This is very straightforward: My angular view displays rows of printOrders generated via ng-repeat. If a print order has been printed, it applies the class 'panel-pink'

<div class="col-md-12" ng-repeat="printOrder in printOrders | filter: statuses">
  <div class='panel mb20 panel-primary panel-hovered' ng-class="{'panel-pink' : {{printOrder.Printed}}}">
     <div class="panel-body">
         <div style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
            <div>{{printOrder.GcodePath}},{{printOrder.Flavor}},{{printOrder.Finishing}}</div>
          </div>
           <div>
             <a class="btn btn-small btn-success btn-sm" ng-click="doPrintOrder(printOrder)">Print</a>
           </div>
       </div>
   </div>
 </div>

When it loads the page, it correclty applies the 'panel-pink' class for those that are printed, but when I change the printOrder status via ng-click it doesn't

When a users click on a "print" button the following code on the print order controller executes:

$scope.doPrintOrder = function (printOrder) {
        PrintOrdersAPIService.printOrder(printOrder.Id, printOrder.UserId, printOrder.GcodePath).then(function (data) {
            printOrder.Printed = true; //this line should change the model
        });
    }

Everything works ok, the only problem is that the ng-class dosen't get appied when the model changes (printOrder.Printed = true;)

What should I do in order to make the styling work dynamically?

shouldn't you just add $scope ? ( $scope.printOrder.Printed = true; ) — jayD

nweg nweg · Accepted Answer · 2015-12-29T18:28:38

Change your ng-class to this:

ng-class="{'panel-pink' : printOrder.Printed}"

You don't need the curly braces.

ng-class not responding to model update

1 Answers