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

Question

JS 文件：

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

CHtml :

    <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>

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

Answer 1

您不需要 JQuery select 或从下拉列表中获取 selected 值。为此，在 select 元素中添加 ng-model。通过这种方式，table 将在下拉菜单 selection 上过滤而不需要按钮：

<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

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

How to filter grid view data from specific column of ng-repeat on button click

javascript

filter

angularjs

angularjs-ng-repeat