Question

我想创建一个菜单。菜单中将有不同数量的项目，但每个项目在选择时将调用不同的功能。我觉得使用ng-repeat来显示基于模板的所有项目会更干净，但我无法弄清楚如何从模板中调用不同的函数。在C ++中，您可以将指向函数的指针作为变量传递给函数，但是我在JavaScript / AngularJS中查找类似的东西并没有为我提供任何有用的东西。在我单独编写每个按钮并复制/粘贴我的模板之前，有没有办法可以让它工作？

Answer 1

备选方案1：

JS：

$scope.items =
[
  { name: 'item 1', action: 'function1' },
  { name: 'item 2', action: 'function2' },
  { name: 'item 3', action: 'function3' }
];

$scope.execute = function(action) {
  $scope[action]();
};

$scope.function1 = function () {
 console.log('function1');
);

$scope.function2 = function () {
  console.log('function2');
};

$scope.function3 = function () {
  console.log('function3');
};

HTML：

<li ng-repeat="item in items" ng-click="execute(item.action)">
  {{ item.name }}
</li>

演示： http://plnkr.co/edit/T6Q3btvk3qbi2SgpIGb6?p=preview

备选方案2：

JS：

$scope.items =
[
  { name: 'item 1', action: function () { console.log('function 1');} },
  { name: 'item 2', action: function () { console.log('function 2');} },
  { name: 'item 3', action: function () { console.log('function 3');} }
];

$scope.executor = function(item) {
  item.action();
};

HTML：

<li ng-repeat="item in items" ng-click="executor(item)">
  {{ item.name }}
</li>

演示： http://plnkr.co/edit/tDuhc2cZgVJ2mQUQm0eq?p=preview

Answer 2

这样的东西？

<ul>
    <li ng-repeat="item in list" ng-click="click(item)">Text</li>
</ul>

在你的控制器中：

$scope.click = function (item) {
    item.handler();
};

Answer 3

我发现了类似的问题，这可能会解决您的问题。 Accessing clicked element in angularjs 您不希望在每个链接上调用不同的函数，而是传递链接元素。

AngularJS：在<li> </li>上使用ng-repeat，使用不同的函数调用进行ng-click？

3 个答案: