Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Question

Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Can anyone help me figure out why the width of a div isn't being set dynamically using AngularJS?

<ul id="contents">
  <li ng-repeat="content in contents">
    <div class="content_right custom_width">
      <div class="title">{{content.title}}</div>
    </div>
  </li>
</ul>

I have the following directive set up:

myApp.directive("custom_width", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

No errors are showing up and the console.log I added doesn't seem to be working. Any ideas on what could be causing this issue?

Thank you for your assistance.

javascript angularjs

Answer 1

Answer №1

When working with directive definitions in AngularJS, camelCase is the way to go:

myApp.directive("customWidth", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

Check out the Directive docs

In AngularJS, directives and attributes are defined using camelCase (lowerCamelCase), while referencing them in HTML elements uses snake case (dash-case or kebab-case).

Answer 2

When working with directive definitions in AngularJS, camelCase is the way to go:

myApp.directive("customWidth", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

Check out the Directive docs

In AngularJS, directives and attributes are defined using camelCase (lowerCamelCase), while referencing them in HTML elements uses snake case (dash-case or kebab-case).

Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Answer №1

Similar questions

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

Can RethinkDB and Node.js/Express handle parallel queries with multiple connections?

Execute a PHP task when the Jquery toggle button is activated, all without causing the page to redirect

Show an input field in the view depending on a condition in AngularJS

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

Issue with the useSWR hook causing the DOM not to update correctly due to mutation

javascript issue with attribute manipulation

What is the best way to incorporate the :after pseudo-element in JavaScript code

utilize ng-bind to apply numerous values simultaneously

Comparing scrollIntoView and moveToElement functions

Just starting out with d3, any easy methods to learn?

Why does the data in useState only update after clicking the button for the second time?

react tried to recycle markup error

Implementing MUI createTheme within Next.js

Struggling with sending intricate model to controller via ajax request

Using TypeScript, the fetch function cannot be assigned

Tips for looping through client.get from the Twitter API with node.js and express

Select a division and retrieve the identification of a different division

Limit Javascript Regex to accept only one specific possibility and exclude all others

Tips for displaying an object's key/value pairs on a webpage