AngularJS如何在HTML模板中搜索JSON对象？（附示例数据）

嘿，我来帮你搞定AngularJS里这个JSON数据的搜索功能！你已经搞定了显示和编辑，那搜索其实不难，咱们一步步来：

你的核心数据是data.Project.stringarr数组，每个元素包含嵌套的_attributes.name（名称字段）和_text（内容字段），咱们的搜索要覆盖这两个字段对吧？

首先把数据暴露给Angular的$scope，然后写一个自定义过滤函数，这样能灵活控制搜索的范围：

angular.module('myApp', [])
.controller('ProjectController', function($scope) {
  // 你的原始数据
  var data = JSON.parse( '{ "Project": { "_attributes": { "gui": "ProjectGui", "prjname": "MyProject" }, "stringarr": [ { "_attributes": { "name": "Project.comments" }, "_text": "MyComments" }, { "_attributes": { "name": "Project.classpath" }, "_text": "D:\\Project\\bin\\config.jar" } ] } }' );
  
  // 把要操作的数组绑定到scope
  $scope.stringArr = data.Project.stringarr;
  
  // 自定义搜索过滤函数
  $scope.searchFilter = function(item) {
    // 如果没有输入搜索词，直接显示所有项
    if (!$scope.searchText) return true;
    
    // 统一转成小写，实现大小写不敏感搜索
    var searchTerm = $scope.searchText.toLowerCase();
    
    // 检查名称和内容是否包含搜索词
    return item._attributes.name.toLowerCase().includes(searchTerm) || 
           item._text.toLowerCase().includes(searchTerm);
  };
});

在HTML模板里加一个搜索输入框，用ng-model绑定搜索关键词，然后在ng-repeat里用咱们的自定义过滤函数：

<div ng-app="myApp" ng-controller="ProjectController">
  <!-- 搜索输入框 -->
  <input type="text" ng-model="searchText" placeholder="搜索名称或内容...">
  
  <!-- 过滤后的列表（保留你原来的显示和编辑逻辑） -->
  <div ng-repeat="item in stringArr | filter:searchFilter">
    <div>
      <label>名称:</label>
      <span>{{item._attributes.name}}</span> <!-- 你原来的名称显示 -->
    </div>
    <div>
      <label>内容:</label>
      <input type="text" ng-model="item._text"> <!-- 你原来的编辑输入框 -->
    </div>
    <hr>
  </div>
</div>

• 如果只需要搜索名称字段，不用自定义函数也可以，直接用对象过滤：ng-repeat="item in stringArr | filter:{'_attributes': {'name': searchText}}"
• 如果要兼容旧浏览器（比如不支持includes()），可以把includes(searchTerm)换成indexOf(searchTerm) !== -1

这样就能实现你要的搜索功能啦，输入关键词后列表会自动过滤匹配的项~

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