Как получить отфильтрованные данные из угловой таблицы JS? - PullRequest
0 голосов
/ 11 октября 2018

Я создал таблицу angularjs с помощью массива.Ниже приведен ссылочный код: -

HTML-код: -

<table align="center">
    <thead>
        <tr>
            <th>Session Code</th>
            <th>Session Name</th>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="First Name" title="Enter First name here to filter data" ng-model="firstNameText"
                />
            </td>
            <td>
                <input type="text" placeholder="Last Name.." title="Enter Last name here to filter data" ng-model="lastNameText"
                />
            </td>
        </tr>
    </thead>
    <tr ng-repeat="tr in Names | filter:{First_x0020_Name:firstNameText,Last_x0020_Name:lastNameText}" style="cursor:pointer">
        <td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.First_x0020_Name}}</td>
        <td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.Last_x0020_Name}}</td>
    </tr>
</table>

Когда вы щелкнете по таблице данных строки, вы получите уведомление о имени и фамилии строки, которую выкликнули.

Ниже приведен код при нажатии на данные таблицы.

$scope.getInfo = function(index,$event){
    alert($scope.Names[index].First_x0020_Name + ' , ' + $scope.Names[index].Last_x0020_Name);
}

Работает, когда данные не фильтруются.

Но когда я фильтровал данные, используявведите заголовок таблицы и нажмите на данные таблицы, это даст неправильное имя и фамилию.

Я хочу получить имя и фамилию человека, которого я щелкнул, даже если он отфильтрован.

Я знаю, что используемая мной функция getInfo получает данные из нефильтрованного массива names .

Как тогда использовать отфильтрованную таблицу angularjs?

1 Ответ

0 голосов
/ 11 октября 2018

Вместо индекса вы можете передать объект-строку в вашу функцию

html

 <td data-ng-cloak ng-click="getInfo(tr,$event)">{{tr.First_x0020_Name}}</td>

js

$scope.getInfo = function(row,$event){
    alert(row.First_x0020_Name + ' , ' + row.Last_x0020_Name);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...