CODEWITHSUNDEEP
angularjs
serge
serge

Reputation: 15239

Angular conditional attributes

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...

Upvotes: 0

Views: 818

Answers (2)

serge
serge

Reputation: 15239

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;

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5584

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>

Upvotes: 3

Related Questions