CODEWITHSUNDEEP
angularjsangularjs-scope
SuperUberDuper
SuperUberDuper

Reputation: 9623

How do I remove these attributes in angular based on scope value

How do I remove these attributes if scope.foo === false? 

<div layout="row" layout-align="space-around center">

I want to do this in the html code, not in my directive.

So in summary I want my app to have

<div layout="row" layout-align="space-around center">
some content
</div>

or 

<div >
some content
</div>

Upvotes: 1

Views: 331

Answers (4)

Vadim
Vadim

Reputation: 8789

You can try something like this:

<div ng-init="foo=true">
  <div ng-attr-layout="{{foo?'':undefined}}row" ng-attr-layout-align="{{foo?'':undefined}}space-around center">Hello</div>
  <button ng-click="foo=!foo">Toggle</button>
</div>

This will toggle presence of layout and layout-align attributes on div.

How it works:

Once foo property in the scope is false the value of expression inside ng-attr-XXX is undefined that will tell ng-attr-XXX not to add XXX attribute to element on which ng-attr-XXX is defined.

Plunker

http://plnkr.co/edit/2Z2uZYBVt7D3ECjcLpGO?p=preview

Upvotes: 1

gr3g
gr3g

Reputation: 2914

<div ng-hide="foo === false" layout="row" layout-align="space-around center">

OR

<div ng-hide="getHidden(foo)" layout="row" layout-align="space-around center">

.controller("name", ['$scope', function($scope){
 $scope.getHidden = function(foo){
      return foo === false;
 }
}]);

Upvotes: 0

Carson Drake
Carson Drake

Reputation: 171

What about this?

<div layout="{{(scope.foo === false)?'':'space-around center'}}" layout-align="{{(scope.foo === false)?'':'row'}}">

What exactly are you trying to do? @SuperUberDuper

Upvotes: 0

Watte
Watte

Reputation: 312

Take a look at ng-attr.

E.g ng-attr-layout="{{myValue}}
And in you controller something like $scope.myValue = "row"

Upvotes: 1

Related Questions