时间戳

首页 > 解决方案 > 如何在按钮单击时从 ng-repeat 的特定列中过滤网格视图数据

javascript - 如何在按钮单击时从 ng-repeat 的特定列中过滤网格视图数据

问题描述

JS 文件：

$scope.GridFilter = function ()
{
    var ddlCategory = $('#ddlValue').val();
    $scope.search = ddlCategory;
}

中文：

    <select id="ddlValue" name="ddlValue">
       <option value="">-- Select any Value--</option>
       <option ng-repeat="item in DataObject" value="{{item.Category}}">{{item.Category}}</option>
    </select>
    <button ng-click="GridFilter()">Filter Grid</button>

网格：

<tr ng-repeat="item in DataGrid | filter:search">
      <td>{{item.Name}}</td>
      <td>{{item.Category}}</td>
      <td>{{item.Description}}</td>
      <td>{{item.Status}}</td>
</tr>

单击按钮时，我想从下拉值中过滤数据。它只需要可搜索类别列，但它会搜索所有其他字段，以便网格显示额外的记录。

标签： javascriptangularjsfilterangularjs-ng-repeat

解决方案

您不需要 JQuery 选择器从下拉列表中获取选定的值。为此添加ng-model选择元素。通过这种方式，表格将在不需要按钮的情况下过滤下拉选择：

<select name="Select" id="multipleSelect" ng-model="search">
    <option value="">-- Select any Value--</option>
    <option ng-repeat="item in DataObject" value="{{item.Category}}">{{item.Category}} 
    </option>
</select>

检查工作演示：DEMO

如果要使用按钮进行过滤操作，请为过滤后的数组使用新变量并在过滤器函数中设置它：

 $scope.GridFilter = function() {
     $scope.filteredGrid = $scope.DataGrid.filter((d) => d.Category == $scope.search);
 }

例如：DEMO2

推荐阅读