Angular conditional attributes

Question

I study AngularJS, now try to add an attribute based on one (or multiple) condition(s).

But this code (CodePen here) doesn't seem to work:

function myController($scope) {
  console.log("start");
  $scope.item = { myBool: false };
  $scope.myClick = function(e) {
    var myHref = angular.element(e.delegateTarget).data(href);
    console.log(myHref);
  };
}

.test{background: lightblue; height: 50px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div np-app ng-controller="myController">
  <div class="test" 
       data-href="{undefined: !item.myBool, 'http://yes.com': item.myBool}" 
       ng-click="myClick($event);console.log('end');">click & see the console</div>
</div>

actually the data-href attribute should not be defined, as myBool == false...

Vanojx1 · Accepted Answer · 2017-05-19 13:03:33Z

3

Use interpolation for that:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    console.log("start");
    $scope.item = {
      myBool: false
    };
    $scope.myClick = function(e) {
      $scope.item.myBool = !$scope.item.myBool;
      console.log(angular.element(e.target).attr("href"));
    };
  });

.test{background: lightblue; height: 50px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div class="test" href="{{item.myBool ? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
    click & see the console
  </div>
</div>

answered May 19, 2017 at 13:03

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

serge Over a year ago

why does the "{aV: aC, bV: bC, cV: cC...}" not work?

serge Over a year ago

thanks for your help, unfortunately the code does not work as expected, because adds an attribute anyway, try to add console.log(angular.element(e.target).attr("inexistent"));

serge Over a year ago

not really, it estimates its value. I found an answer based on your code bellow ;) thanks!

serge · Accepted Answer · 2017-05-19 13:48:59Z

Finally, updated a little bit the Vanojx1 answer to:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    console.log("start");
    $scope.item = { myBool: false };
    $scope.myClick = function(e) {
      $scope.item.myBool = !$scope.item.myBool;
      console.log(angular.element(e.target).attr("href"));
      console.log(angular.element(e.target).attr("noarg"));     
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div class="test" ng-attr-href="{{item.myBool? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
    click & see the console
  </div>
</div>

Important improvements:

updated the Angular version to be > 1.3 (actually I used an ancient one);
used the ng-attr-xxx attribute that is removed (the attribute itself, not just its value) if its value estimated to undefined;

Collectives™ on Stack Overflow

Angular conditional attributes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related