如何为ng-repeat元素设置不同padding样式？ng-class使用无效求助

Hey there! Let's work through getting those 6 ng-repeat boxes perfectly aligned with the vertical lines on your background image. It sounds like the ng-class approach for padding isn't hitting the mark—let's break down what might be going wrong and fix this step by step.

First: Get Your Container & Background Setup Right #

Before worrying about the boxes, we need to make sure your background image container is configured to act as a reliable positioning base. Your current code has padding-left: 150px on the container, which might throw off alignment—let's adjust that first:

<div style="background-color: white">
  <div id="container" class="row">
    <!-- Your ng-repeat boxes go here -->
  </div>
</div>

Add this CSS to style the container properly:

#container {
  position: relative; /* Critical: makes child elements position relative to this container */
  background-image: url('http://skymics.com/Energy/sampleschematic.jpg');
  background-size: contain; /* Scales the image to fit the container without distortion */
  background-repeat: no-repeat;
  width: 800px; /* Replace with your actual background image width */
  height: 400px; /* Replace with your actual background image height */
  padding: 0; /* Remove any default padding that might shift elements */
}

Fixing ng-Class & Positioning the Boxes #

Padding might not be the most reliable way to align to specific vertical lines—absolute positioning will give you pixel-perfect control. Here's how to pair it with ng-class correctly:

Step 1: Update Your ng-Repeat HTML

Make sure your ng-repeat generates unique classes for each box using $index:

<div ng-repeat="item in yourItemArray track by $index" 
     ng-class="['vertical-line-box', 'box-' + ($index + 1)]">
  {{ item.content }} <!-- Replace with your box content -->
</div>

Step 2: Add CSS for the Boxes & Their Positions

Define base styles for all boxes, then target each one with its unique class to set the exact horizontal position:

.vertical-line-box {
  position: absolute; /* Lets us place the box anywhere in the container */
  top: 60px; /* Adjust this to match the vertical position of your lines */
  width: 60px; /* Set your desired box width */
  height: 60px; /* Set your desired box height */
  background-color: rgba(0, 123, 255, 0.6); /* Semi-transparent blue for debugging */
}

/* Adjust these left values to match each vertical line's position on your image */
.box-1 { left: 130px; }
.box-2 { left: 250px; }
.box-3 { left: 370px; }
.box-4 { left: 490px; }
.box-5 { left: 610px; }
.box-6 { left: 730px; }

Why Your Original ng-Class Might Have Failed #

If padding wasn't applying, check these common issues:

• Class name typos: Double-check that the class names in your CSS match exactly what ng-class is generating (e.g., box-1 vs box_1).
• CSS specificity: If you had inline styles on the boxes, they might have overridden your class-based padding. Absolute positioning avoids this conflict.
• Incorrect ng-class syntax: Make sure you're using the right format—ng-class="['class1', 'class2']" or ng-class="'box-' + $index" works, but messy string concatenation can break things.

Bonus: Dynamic Positioning with ng-Style #

If you want to calculate positions in your controller instead of hardcoding CSS, use ng-style:

<div ng-repeat="item in yourItemArray track by $index" 
     ng-style="getBoxPosition($index)"
     class="vertical-line-box">
  {{ item.content }}
</div>

Then in your Angular controller:

$scope.getBoxPosition = function(index) {
  // Define exact positions for each line (adjust these values!)
  const linePositions = ['130px', '250px', '370px', '490px', '610px', '730px'];
  return { left: linePositions[index], top: '60px' };
};

This gives you more flexibility if you ever need to adjust positions dynamically.

内容的提问来源于stack exchange，提问作者shahrzad