Как я могу передать параметр в ng-click внутри ng-repeat?

#javascript #angularjs

Вопрос:

У меня есть этот код, в котором я повторяю над массивом и хочу добавить функциональность, которая, если я нажимаю на строку, ее данные отображаются где-то еще на той же странице.

 <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 не работает, даже когда я пишу его для вывода простого сообщения на консоль.

Ответ №1:

Когда вы вызываете console.log() from ng-click , он фактически ищет $scope.console.log() , которого не существует. Вам нужно создать функцию в вашем контроллере, которая принимает входные данные, а затем вызывает функцию javascript console.log() .

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

Затем вы привязываетесь к нему следующим образом:

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

ДЕМОНСТРАЦИЯ

1. Я не могу даже получить предупреждение (contact.id ) работать и не может понять, почему. Вот мой контроллер. MyApp.controller(‘ContactsController’, [‘$scope’,’$http’, функция ($scope,$http){ // получение данных с помощью ajax-вызова $scope.contacts=data; }). ошибка (функция (данные, статус, заголовки, конфигурация) { //вызывается асинхронно, если возникает ошибка // или сервер возвращает ответ со статусом ошибки. }); var showDetails=функция(ContactID){ оповещение(ContactID); } }])

2. Ваш код контроллера неверен. Я обновил свою демонстрацию, чтобы показать извлечение данных через $http .

Ответ №2:

Да, @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>