applying different expression for ng-class

Question

Hi I'm trying to change the color of a button based on the value of this variable: $scope.order.orderwindow.invoicedata.

I'm changing the expression in ng-class to do this. However, right now it's not changing despite my watch function.

directive.js

 .directive('invoicetypewatch', function() {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
    // change styling of button depending on if id is null or not

    scope.$watch('order.orderwindow.invoicedata', function() {

      if(scope.order.orderwindow.invoicedata.id!=null) {       
    scope.invoice_delete_type_button_styling={"btn btn-danger btn-block":true};

        }else{
        scope.invoice_delete_type_button_styling={"btn btn-danger btn-block":false};
        }
      });

    }
    };
    })

view.html

 <div class="col-lg-4" invoicetypewatch>
<button ng-class="{{invoice_delete_type_button_styling}}" ng-click="delete(invoice_delete_type_button,order.orderwindow.invoicedata.id)">{{invoice_delete_type_button}}</button>
</div>

Answer 1

I think you just need to assign the class in the directive - no need for the map object:

    if(scope.order.orderwindow.invoicedata.id!=null) {       
       scope.invoice_delete_type_button_styling="btn btn-danger btn-block";

    }else{
         scope.invoice_delete_type_button_styling="btn btn-success";
    }

Then just use that scope variable in ng-class without the {{}} since ng-class evaluates whatever is passed in

  <button ng-class="invoice_delete_type_button_styling"

You do not need {{}} for ng-class because it already takes an expression or a string. You would use {{}} if you were just using class it would be evaluated

 <button class="{{invoice_delete_type_button_styling}}"