Creating dynamic attributes in Angular: How to programmatically change HTML attributes based

Question

Creating dynamic attributes in Angular: How to programmatically change HTML attributes based

In my Angular 1.5 project, I am facing a scenario where I need to dynamically add directive attributes to HTML based on certain conditions.

For example, when the condition is true, I want to include directive1 and directive2 as attributes:

<ng-form class="myForm" directive1 directive2>

Conversely, when the condition is false, I wish to add directive3 and directive4 as attributes:

<ng-form class="myForm" directive3 directive4>

I attempted using ternary operators directly in the HTML but it did not yield the expected results:

<ng-form class="myForm" {{ condition ? directive1 directive2 :directive3 directive4 }}>

Can anyone provide me with a straightforward solution to tackle this issue?

javascript angularjs

Answer 1

Answer №1

If you're facing issues with directives in AngularJS, one solution is to wrap them into another directive. There's already a suggestion available for this problem:

Add directives from directive in AngularJS

Here's the code snippet provided in the other answer:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      scope: {
        condition: '='
      },
      priority: 1000,
      link: function link(scope,element, attrs) {
        if(!scope.condition){
             element.attr('directive1', '');
             element.attr('directive2', '');
        }else{
             element.attr('directive3', '');
             element.attr('directive4', '');
        }

        element.removeAttr("common-things"); 
        element.removeAttr("data-common-things"); 

         $ compile(element)(scope);
      }
    };
  });

Answer 2

If you're facing issues with directives in AngularJS, one solution is to wrap them into another directive. There's already a suggestion available for this problem:

Add directives from directive in AngularJS

Here's the code snippet provided in the other answer:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      scope: {
        condition: '='
      },
      priority: 1000,
      link: function link(scope,element, attrs) {
        if(!scope.condition){
             element.attr('directive1', '');
             element.attr('directive2', '');
        }else{
             element.attr('directive3', '');
             element.attr('directive4', '');
        }

        element.removeAttr("common-things"); 
        element.removeAttr("data-common-things"); 

         $ compile(element)(scope);
      }
    };
  });

Answer 3

Answer №2

Brand new solution

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}">

ng-attr is the way to go in this situation. It dynamically adds attributes based on a condition.

Previous method

Instead of using a ng-show, you can incorporate the logic directly into the directive itself. This will show or hide based on the condition.

Answer 4

Brand new solution

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}">

ng-attr is the way to go in this situation. It dynamically adds attributes based on a condition.

Previous method

Instead of using a ng-show, you can incorporate the logic directly into the directive itself. This will show or hide based on the condition.

Answer 5

Answer №3

What is the benefit of avoiding ng-if?

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>

Answer 6

What is the benefit of avoiding ng-if?

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>

Creating dynamic attributes in Angular: How to programmatically change HTML attributes based

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to consolidate geometry in each frame during the rendering process using three.js?

Should the article ID be sent to the ajax file, or should the ajax file retrieve the article ID directly? This dilemma arises in a

Utilizing nprogress.Js for a Dynamic Progress Bar

Having trouble loading a 3D model with ThreeJS in React?

Using javascript and d3.js to display a set number of items on each line through printing

The time update in React Js is not showing on Material UI's DatePicker

The error message indicates that the element countdown is missing or does not exist

"Enhance your Strongloop app by adding an object

In VueJS and Quasar, what is the best way to retrieve the clicked item in order to pass it to the API?

I am struggling to set a required input in Angular2

I encountered difficulty clicking a button due to its unique button data-order-group-id while using python and selenium

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

Utilizing d3.js to filter a dataset based on dropdown selection

Can we optimize this jQuery code to be condensed into only 3 functions?

Using getStaticProps in Next.js to retrieve menu data and seamlessly integrate it into the layout

Rotate the image as you swipe left or right with Angular's ng-swipe-left and ng-swipe-right features

Simultaneous access to Session by numerous files

Angular: Leveraging real-time data updates to populate an Angular Material Table by subscribing to a dynamic data variable in a service

Combining data fields in AngularJS

Arranging data in an HTML table by dynamically populating it with information retrieved from a server