Question

我在角度中遇到$index问题。我有一个ng-repeat，我正在使用$index来跟踪唯一的类。这是我的代码：

    <div ng-repeat="style in styleArr">
       <div class="myclass{{ $index }}">
       </div>
    </div>

在角度控制器中，我在myclass0中附加了一个div，但是没有工作。这是我的控制器。

 myClass = angular.element('.myclass0');
 myClass.append('<div class="test">Hello World..<test>');

当我尝试这样做时：

<div ng-repeat="style in styleArr">
    <div class="myclass0">
    </div>
 </div>

它的工作正常。有什么建议吗？

Answer 1

我认为你需要为每个div使用一个独特的类来应用一个独特的CSS。您可以通过分配唯一的类或分配唯一的ID来实现它。对于一个班级，你需要使用＆＃34; ng-class＆＃34;指令。

<div ng-repeat="style in styleArr">
       <div ng-class="myclass{{ $index }}">
       </div>
</div>

对于唯一身份证使用：

<div ng-repeat="style in styleArr">
       <div id="style{{ $index }}">
       </div>
</div>

最佳选择是使用唯一ID执行操作。如果只想分配样式，请使用Unique类。

Answer 2

使用ng-class，它允许在类名

中使用表达式

<div ng-repeat="style in styleArr">
       <div ng-class="myclass{{ $index }}">
       </div>
</div>

Answer 3

使用＆＃34; ng-class＆＃34;而不是＆＃34; class＆＃34;

<div ng-repeat="style in styleArr">
   <div ng-class="myclass{{ $index }}">
   </div>
</div>

Answer 4

你必须改变ng-class的课程

Answer 5

你无法可靠地完成你想要做的事情。您需要了解Angular中的摘要循环和模板的编译/呈现是如何工作的。然后你会理解那个带有类myclass0，myclass1等的元素 - 在你试图从DOM中获取它们时是不可用的。再次 - 这就是为什么你应该从不在控制器中进行任何DOM操作的原因。

你应该使用你的自定义指令或现有的Angular指令，如ngIf / ngShow等。

例如：

<div ng-repeat="style in styleArr">
    <div class="myclass" ng-if="style.show">
        <div>Hello ...</div>
    </div>
</div>

并在控制器中

// show "Hello" in the first myclass
$scope.styles[0].show = true;

Answer 6

我的建议是不要在控制器内部进行DOM操作。这就是指令的用途。但是在你的情况下，如果你只想在第一次迭代中附加一个div，你可以这样做：

<div ng-repeat="style in styleArr">
       <div ng-show="$first" class="test">Hello World..</div>
 </div>