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

72

我有一个简单的删除按钮，它将接受字符串或数字，但不接受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>

但是，单击时什么也没有发生。如果我对变量进行硬编码，那么它就可以正常工作。我以为我不是在以“角度”方式做事，但是我不确定那是什么方式:)

这是我的控制器代码：

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

javascript angularjs

— 克雷格
source

138

您无需在中使用大括号（{{}}）ng-click，请尝试以下操作：

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

— pkozlowski.opensource
source

2

然后我将如何通过函数传递submit.id？据我了解，function（submission.id）{}在我的控制器中将无法正常工作，因为函数只能使用句点

— Joe Isaacson 2014年

1

*澄清* ::将角度值传递给属性时，无需使用花括号，但在内部HTML标记中仍将需要花括号。示例：<button ng-click =“ delete（submission.id）”> {{submission.displayValue}} </ button>

— Rick

我想知道为什么在执行此操作时为什么将括号传递给函数而不是变量值：<button data-ng-click="toggleDetails('v_{{ $index }}')">Details</button> 您的答案确实有用：<button data-ng-click="toggleDetails('v_' + $index)">Details</button> 有趣的是，错误的方式看起来像是在开发人员工具窗口中正确呈现的那样。

— jaybro

1

该ngClick指令绑定一个表达式。它直接执行角代码（如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>

展开摘要

— 水仙
source