Question

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

<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也没有工作。

Answer 1

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

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

然后你这样绑定它：

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

Demo

Answer 2

是的，@杰拉德是对的。但是如果要打印整行数据，则必须将整个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>

如何将参数传递给ng-repeat中的ng-click？

2 个答案: