javascript - 如何在单击按钮时从 ng-repeat 的特定列过滤 GridView 数据

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 选择器即可从下拉列表中获取所选值。为此，在选择元素中添加 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