AngularJS点击按钮实现GridView仅按Category列筛选数据问题

我懂你现在的困扰——AngularJS默认的filter过滤器会对对象的所有字段做模糊匹配，所以你直接把下拉框的Category值赋值给$scope.search时，它会检查每一列的内容，只要有任何字段包含这个值就会被筛选出来，自然就出现了额外的记录。

要解决这个问题，关键是告诉过滤器只针对Category字段进行匹配，而不是全局搜索。下面是具体的修改方案：

1. 修改筛选函数（JS部分） #

把原来直接赋值字符串的方式，改成赋值一个指定字段的对象：

$scope.GridFilter = function () { 
  var selectedCategory = $('#ddlValue').val(); 
  // 当选择了分类时，指定仅筛选Category字段；否则清空筛选显示所有数据
  $scope.search = selectedCategory ? { Category: selectedCategory } : undefined; 
}

这里的逻辑是：

• 当用户选择了某个Category时，$scope.search变成{ Category: 选中的值 }，过滤器会只检查每条数据的Category属性是否匹配
• 当用户选择默认的空选项时，把search设为undefined，这样过滤器会失效，显示所有数据

2. 优化下拉框（可选但推荐） #

你当前的下拉框用ng-repeat="item in DataObject"会生成重复的Category选项（如果DataObject里有多个同分类的项），可以先对Category去重：

方案一：使用第三方过滤器（angular-filter） #

先引入angular-filter模块，然后在下拉框里用unique过滤器：

<select id="ddlValue" name="ddlValue"> 
  <option value="">-- Select any Value--</option> 
  <option ng-repeat="item in DataObject | unique:'Category'" value="{{item.Category}}">{{item.Category}}</option> 
</select>

方案二：手动在控制器里去重 #

如果不想引入第三方模块，可以在控制器初始化时处理数据，得到去重的Category列表：

// 假设DataObject是你的数据源
$scope.uniqueCategories = Array.from(new Set(DataObject.map(item => item.Category)));

然后修改下拉框的ng-repeat：

<select id="ddlValue" name="ddlValue"> 
  <option value="">-- Select any Value--</option> 
  <option ng-repeat="category in uniqueCategories" value="{{category}}">{{category}}</option> 
</select>

3. 保持网格的ng-repeat不变 #

你的网格代码不需要修改，依然是：

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

这样修改后，点击筛选按钮时，就只会针对Category列进行匹配，不会再出现其他字段被误匹配导致的额外记录了。

内容的提问来源于stack exchange，提问作者Dinesh Gaud