2016-11-27 2 views
0

Ich habe das folgende Problem. Ich möchte Menülinks wiederholen. Das Programm erstellt jedoch nicht den entsprechenden Click-Handler.Wie wiederhole ich einen Click-Handler in ngRepeat (AngularJS)?

Ausblick:

//view is created by Angular Material 
<md-menu-item ng-repeat="mItem in ::menuItems"> 
    <md-button ng-click="mItem[action]"> 
     <md-icon>{{ ::mItem.icon }}</md-icon> 
     {{ ::mItem.name }} 
    </md-button> 
</md-menu-item> 

Ctrl:

$scope.menuItems = [ 
     { icon: 'mode_edit', name: 'Edit', action: 'clickEdit()' }, 
     { icon: 'delete', name: 'Delete', action: 'clickDelete()' } 
    ]; 

$scope.clickEdit = clickEdit; 
$scope.clickDelete = clickDelete; 

    function clickEdit() { 
     $log.info('edit clicked'); 
    } 

    function clickDelete() { 
     //code... 
    } 

Was ich tun müssen, um die Handler in ngClick zu bekommen?

Antwort

1

Ich denke, es ist am besten, dass die Logik in einem Dienst wie diese zu halten:

//view is created by Angular Material 
<md-menu-item ng-repeat="mItem in ::menuItems"> 
    <md-button ng-click="action(mItem.action)"> 
     <md-icon>{{ ::mItem.icon }}</md-icon> 
     {{ ::mItem.name }} 
    </md-button> 
</md-menu-item> 

$scope.menuItems = [ 
    { icon: 'mode_edit', name: 'Edit', action: 'edit' }, 
    { icon: 'delete', name: 'Delete', action: 'delete' } 
]; 

$scope.action = function(actionName){ 
    // call service 
} 
+0

Es ist eine gute Lösung, ich werde es versuchen :) und geben Ihnen eine Rückmeldung. – yuro

-1

Versuchen:

//view is created by Angular Material 
<md-menu-item ng-repeat="mItem in ::menuItems"> 
    <md-button ng-click="mItem['action']"> <!--there is other variant below--> 
     <md-icon>{{ ::mItem.icon }}</md-icon> 
     {{ ::mItem.name }} 
    </md-button> 
</md-menu-item> 

hier die andere Variante:

<md-button ng-click="mItem.action"> <!--there is other variant below--> 
+0

Dank für Ihre Hilfe, aber deine Lösung funktioniert nicht. – yuro

Verwandte Themen