Angular.js ng-repeat eindeutiger Bezeichner

Question

Ich verwende ng-repeat auf einem <tr>-Tag, um die <td> Tags mit Daten aus mysql gezogen und in Json konvertiert. Das funktioniert gut. Einer der <td> Tags, die ich verwende, enthält jedoch eine Schaltfläche.

Was ich tun möchte, ist, dass jeder dieser Buttons irgendwie im DOM identifiziert wird, damit ich dann gezielt mit bestimmten Anfragen zielen kann.

Beispiel: Seite lädt, ng-repeat wiederholt einen Knopf 4 mal. Für jeden dieser Buttons wäre ein ng-Klick angebracht. Ich möchte, dass jeder von ihnen verschiedene Informationen in einer JSON-Datei öffnet und filtert.

Bin ich richtig in der Annahme, dass ng-repeat würde einfach den gleichen Gegenstand für jede Taste öffnen, und wie würde ich gehen, um sie getrennt zu machen? Vielen Dank.

Answer 1

Sie können auf dem Front-End etwas tun:

<button ng-repeat="item in items track by $index" ng-click="someFunction($index)" >Something happens</button> 

Dann in Ihrem Controller:

$scope.someFunction = function (index) { 
    if (index === 1): 
     // etc. 
    else... 
     // Or use switch, whichever works for you. 

Answer 2

Sie könnten die spezifische Funktion auf jedes Element im Array erstellen.

<button ng-repeat="button in buttons" ng-click="button.functionName()">{{button.name}}</function> 

Answer 3

Es gibt $ Index dafür. Es ist eine sehr gute Angewohnheit, für jede deiner ng-Wiederholungen zu nehmen. Vergessen Sie auch nicht, einmal zu binden, wenn die Benutzeroberfläche Ihrer Schaltflächen nicht geändert wird, sobald das DOM geladen wurde.

<ul> 
    <li ng-repeat="page in pages"> 
     <a ng-class="{ testClass: $index == pageNumber }" ng-click="setPageNumber($index)">{{ page }} - index is : {{$index}}</a> 
    </li> 
</ul> 

http://jsfiddle.net/bonatoc/4z1t4gsm/3/

Auch könnten Sie tun (mit bind-once):

<button 
ng-repeat="button in ::buttons track by $index" 
id="button_{{$index}}" 
class="{{button['css_class']}}" 

... gegeben Ihre Tasten sowie ein JSON-Objekt waren (Vorsicht, ng-repeat mag Arrays Objekte sind in Ordnung):

$scope.buttons = [ 
    0: { 
     'css_class': someClass, 
     'functionToTrigger': function(... 

// ...