如何将绑定变量传递给 ng-click 函数？答案

【问题标题】：How can you pass a bound variable to an ng-click function?如何将绑定变量传递给 ng-click 函数？
【发布时间】：2012-09-28 21:55:36
【问题描述】：

我有一个简单的删除按钮，可以接受字符串或数字，但不接受 ng-model 变量（不确定术语是否正确）。

<button class="btn btn-danger" ng-click="delete('{{submission.id}}')">delete</button>

生成：

<button class="btn btn-danger" ng-click="delete('503a9742d6df30dd77000001')">delete</button>

但是，当我单击时没有任何反应。如果我对变量进行硬编码，那么它就可以正常工作。我假设我只是没有以“Angular”方式做事，但我不确定那是什么方式:)

这是我的控制器代码：

$scope.delete = function ( id ) {
    alert( 'delete ' + id );
}

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您不需要在ng-click 中使用大括号 ({{}})，试试这个：

<button class="btn btn-danger" ng-click="delete(submission.id)">delete</button>

【讨论】：

我将如何通过函数传递submission.id？据我了解，function(submission.id) {} 在我的控制器中不起作用，因为函数不能除了句点
* 澄清 * :: 在将角度值传递给属性时，您不需要使用花括号，但在内部 HTML 标记中仍然需要它们。示例：
我想知道为什么它在这样做时将括号传递给函数而不是变量值：<button data-ng-click="toggleDetails('v_{{ $index }}')">Details</button> 你的回答真的很有帮助：<button data-ng-click="toggleDetails('v_' + $index)">Details</button> 有趣的是，错误的方式看起来像是正确渲染在开发者工具窗口中。

【解决方案2】：

ngClick 指令绑定了一个表达式。它直接执行 Angular 代码（如ngIf、ngChange 等），无需{{ }}。

angular.module('app', []).controller('MyCtrl', function($scope) { 
    $scope.submission = { id: 100 };

    $scope.delete = function(id) {
        alert(id + " deleted!");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
    <button ng-click="delete(submission.id)">Delete</button>
</div>

【讨论】：