The essence of the problem is that there is an object in the controller, a normal list of properties. By clicking on the client’s side, the property of the object is removed and, when the object is completely empty, a block should be hidden according to the ng-if directive.

I try to convey this:

 $scope.hidden = !!Object.keys(obj).length;

And, accordingly, on the html side:

 ng-if="$ctrl.hidden";

It does not work, and there are no errors in the console.

  • one
    And where did $ctrl come from? You have hidden - this property is directly $scope . - Yaant
  • $ ctrl - just use the controller in html, because I do through component. You can specify $ ctrl as .... but did not bother too much. - vanless
  • Read again the code in the question: assign the value to the skopu, and check with the controller - Grundy

1 answer 1

I decided the question so maybe someone will come in handy. Just registered in the handler, which removes the property:

 if (Object.keys(obj).length === 0) obj = null;

on the html side

 ng-if="$ctrl.obj"

Of course, it will be necessary to slightly correct the code in other handlers, in particular, in the one that adds these properties, but I think the essence is clear. If anyone comes up with a better idea, I will only be happy :)

  • In fact, you need to either update $scope.hidden after deleting the property, or in ng-if call a function that will be defined something like this: $sciope.isHidden = function () {return !!Object.keys(obj).length;} The bottom line is that your $scope.hidden not automatically updated when you change obj . - Yaant
  • all right, also works. Thank! - vanless