如何在ng-repeat中传递参数给ng-click

How can I pass a parameter to ng-click inside an ng-repeat?

本文关键字：参数 ng-click ng-repeat      更新时间：2023-09-26

我有这段代码，其中我在数组上重复，并希望添加一个功能，如果我单击一行，其数据将显示在同一页面的其他地方。

<table>
  <button ng-click="console.log('hello')">view</td>
  <div>
    <tr ng-repeat="contact in contacts | filter:searchText" >
      <td>{{contact.city}}
      </td>
      <td>{{contact.firstName}}</td>
      <td><button ng-click="console.log(contact.id)">view</td>
    </tr>
  </div>
  </table>

我似乎不明白为什么没有一个ng-click的工作，甚至当我写它输出一个简单的消息到控制台

当您从ng-click调用console.log()时，它实际上是在寻找不存在的$scope.console.log()。您需要在控制器中创建一个接受输入的函数，然后调用javascript console.log()函数。

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

然后像这样绑定:

<button ng-click="log(contact.id)">
演示

是的，@Jerrad是对的。但是如果您想打印整行数据，则必须将整个contact对象传递到函数中。你的HTML也不正确。

工作代码在这里。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
</head>
<body ng-app>
    <table ng-controller="controller">
        <input type="text" ng-model="searchText" />
        <div>
            <tr ng-repeat="contact in contacts | filter:searchText">
                <td>{{contact.city}}
                </td>
                <td>{{contact.firstName}}</td>
                <td>
                    <button ng-click="getRowData(contact)">view</button>
            </tr>
        </div>
    </table>
    <script>
        function controller($scope, $http) {
            $scope.contacts = [
                {'city':'City 1', 'firstName':'Firstname 1'},
                {'city':'City 2', 'firstName':'Firstname 2'},
            ];
            $scope.getRowData = function(data) {
                console.log(data.city+'==='+data.firstName);
            }
        }
    </script>
</body>
</html>
相关文章：