如何从Angular JS表中获取过滤数据?

时间:2018-10-11 11:50:20

标签: javascript angularjs multidimensional-array

我借助数组创建了一个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 函数从未经过滤的名称数组中获取数据。

然后如何使用过滤后的angularjs表?

1 个答案:

答案 0 :(得分:0)

您可以将行对象传递给函数而不是索引

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);
}