CODEWITHSUNDEEP
angularjsangularjs-directive
user972255
user972255

Reputation: 1828

AngularJS - How to show custom directives based on condition

I have to show a custom directive (i.e. task-moveable) based on some condition. I have to only show the task-movable attribute for tasks which is not completed yet. Is there any way we can do this in Angularjs?

HTML Code:

<div class="gantt-body-background" ng-repeat="row in gantt.rows" task-moveable>
  ....
</div>

Thanks in advance.

Upvotes: 0

Views: 1774

Answers (2)

brianmarco
brianmarco

Reputation: 353

You could make a tweak such that your taskMoveable directive can observe a value assigned to it. From there do an $eval on the value of the taskMoveable attribute to get your boolean.

As an example:

app.directive('taskMoveable', function () {
  return {
    controller: function ($scope, $element, $attrs) {
      $scope.taskMoveable = {};

      $attrs.$observe('taskMoveable', function (value) {
        if (value) {
          $scope.taskMoveable.amIMoveable = $scope.$eval(value);
        }
      });
    },
    template: '<span ng-bind="taskMoveable.amIMoveable"></span>'
  };
});

See my plunk here for a more detailed example:

http://plnkr.co/edit/0nK4K9j3SmNnz8PgRYfR

Upvotes: 1

Tyler McGinnis
Tyler McGinnis

Reputation: 35276

You could use ng-if for that whole element. Something like this.

<div class="gantt-body-background" ng-repeat="row in gantt.rows" ng-if="thing.stuff" task-moveable>
  ....
</div>

Then that div would only be in the DOM if thing.stuff was truthy.

Upvotes: 1

Related Questions