2015-10-08 44 views
1

我在angular.I中有$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> 

其工作fine.Any建議嗎?

+0

不要直接在角度DOM操作。添加div是jQuery風格,這與角度設計的方式非常相反。使用數據綁定和模板。 – LionC

+0

該類實際上應該正確評估,但使用'ng-class'更安全,但我認爲你的問題在於你試圖追加到像jquery中那樣的元素,這通常不是角色的前進方向對這個。我的猜測是你設置的myClass正在尋找重複運行前的元素。你不想像控制器那樣做DOM操作。你想達到什麼目的? – ajmajmajma

回答

1

我想你想爲每格一個獨特的類應用獨特的CSS。您可以通過分配唯一的類或分配唯一的ID來實現它。對於一個類,你需要使用「ng-class」指令。

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

的唯一ID使用:

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

最佳選擇是使用唯一的ID,用於執行操作。如果您只想分配樣式,請使用唯一類。

0

使用ng-class,它允許在類名的表達

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

更多信息:https://docs.angularjs.org/api/ng/directive/ngClass

+0

沒有運氣..我也嘗試過ng-class。我認爲ng-class對我來說不是問題。 – Rahul

+0

@ user5320720該類不是您的問題,您使用.element和.append部分的想法與角度想要工作的方式不一致。 – ajmajmajma

+0

@ dfsq ..如果元素(myclass0,myclass0)根據你不可用。當我對類名進行硬編碼時,它如何追加? – Rahul

0

使用 「納克級」,而不是 「類」

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

你說得對,我編輯了我的評論! – Jelmer

0

你必須改變ng級的級別

0

你可以不要可靠地去做你想做的事情。您需要了解Angular中的模板的摘要循環和編譯/渲染。然後,您將瞭解該類與myclass0,myclass1等元素 - 在您試圖從DOM中獲取它們時不可用。再次 - 這就是爲什麼你應該從在控制器中做任何DOM操作的原因。

您應該使用自定義指令我你的情況或現有角指令像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; 
0

我的建議將不會有控制器內的DOM操作。那是什麼指令用於。然而,在你的情況,如果你只是想追加一個div對於第一次迭代,你可以做這樣的事情:

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

更多關於ng-repeat and $first