Angular ng-repeat 取决于搜索结果答案

【问题标题】：Angular ng-repeat depending on search resultsAngular ng-repeat 取决于搜索结果
【发布时间】：2014-05-13 21:25:59
【问题描述】：

我是个新手，虽然到目前为止我很喜欢它，但在我的第一个真实案例中遇到了一个小问题。我有一个工作人员信息的 .json 文件。我还有一个由 Google 的 Search Appliance 运行的全球搜索，它只通过页面。理想情况下，当用户搜索与我的 .json 文件中的任何名称匹配的关键术语时，我希望将他们的信息（指向他们完整个人资料的链接也来自 .json）与搜索结果分开显示。

到目前为止，我已经能够使用 ng-repeat 在页面上显示 .json，并对显示的数量进行排序/限制。我猜我将不得不解析以某种方式使用的搜索词的 url。这个功能甚至可以通过角度实现吗？

任何线索或提示将不胜感激。

【问题讨论】：

您正在寻找$location 对象。这为您提供了所有 url 参数。 sort|limit 功能也是搜索 JSON 对象的正确方法。
您可以构建一个Staff 控制器来导入和存放JSON 数据，然后根据搜索填充一个$scope.staffMatched 变量并在其上使用ng-repeat。
@Jonn 这听起来很像我所拥有的。感谢您的建议！从 JSON 数据“匹配”的角度指令是什么？

标签： javascript json angularjs search

【解决方案1】：

我也是 Angular 的新手，但请继续尝试一下。请注意，它依赖于angular-resources.js。

这个想法是创建一个填充数据的工厂，然后是一个与 DOM 交互的控制器。

var myApp = angular.module('myApp',[]);

myApp.factory('StaffData', function($http){
  return {
    getData : function() { //Load your json file
      $http({
        method: "GET",
        url: "staff.json"
      }).success(function(staff) { return staff; })  //Return the staff data
      .error(function(e) { console.log(e); return []; });  //An error occurred
    }
});

myApp.controller('StaffSearch', function($scope, StaffData){
  var allStaff = StaffData.getData();
  $scope.staffMatched = refine(allStaff);

}

function refine(staff) {
  var matches = [];
  //Implement search algorithm here
  return matches;
}

然后在 HTML 中，

<div ng-controller="StaffData">
  <div ng-repeat"member in staffMatched"> {{member.name}} </div>
</div>

不要使用refine函数，而是尝试使用Angular's filter functions。

【讨论】：