如何使用AngularJS搜索源自另一台服务器的JSON数据

我有数据要查。我正在用AngularJS编写一个目录应用程序，它从我们的一台服务器获取JSON数据；员工名单。我需要能够对这些数据进行实时搜索，但我尝试过的一切似乎都不起作用。具体来说，视图不会更新

代码：app.js

var app = angular.module('directory', ['ngRoute']);

app.service('DirectoryService', ['$http', function($http){
var baseURL = "http://xxx.xxx.xxx.xxx/accounts/people/json";

return{
    getEmployees: function() {
        return $http.get(baseURL).then(function(response){
            return response.data;
        });
    }
}
}]);

app.config(['$routeProvider', function($routeProvider){
$routeProvider
    .when('/employees', {
        templateUrl: '_common/partials/list.html'
    })
    .otherwise({
       redirectTo: '/employees' 
    });
}]);

app.controller('DirectoryController', ['$scope', 'DirectoryService',            
function($scope, DirectoryService){
    $scope.searchName = '';
    DirectoryService.getEmployees().then(function(data){
        $scope.employeeList = data;
        console.log(data);
    });
}]);

代码：list.html

<div id="searchSection">
<input id="searchValue" type="text" placeholder="Search by Name" ng-
model="searchName" />
</div>
<div id="listView">
<ul>
    <li ng-repeat='employee in employeeList | filter: {name:searchName}'>

    <p>{{employee.name}}</p>

    </li>
</ul>
</div>

{{employee.name}

当我添加过滤器时，我只需添加一个带有ng模型的输入：

<input class="form-control" ng-model="searchFilter" placeholder="Filter..." />

然后在我的发言中重复：

<tbody ng-repeat="user in usc.users | filter:searchFilter">
<tr>
{{user.name}}
</tr>
</tbody>

{{user.name}

---

这将过滤所有的名称。

最好使用工厂为您的服务，让服务为您保存数据，并在控制器中引用它。按照这些思路应该可以做到：

app.factory('DirectoryService', ['$http', function($http) {
  var service = {};
  service.data = {
    baseURL:"http://xxx.xxx.xxx.xxx/accounts/people/json",
    employeeList:[],
    searchName:""
  }

  service.getEmployees = function() {
    $http.get(service.data.baseURL).success(function(response) {
      service.data.employeeList = response;
    })
  }

  return service;
}])

然后，控制器功能可以引用服务的数据，该数据将动态更新：

app.controller('DirectoryController', ['$scope', "DirectoryService", function($scope, DirectoryService) {
  $scope.ds = DirectoryService.data;
  DirectoryService.getEmployees();
}])

因此，您的相关HTML函数应该如下所示：

<input id="searchValue" type="text" placeholder="Search by Name" ng-model="ds.searchName" />

<li ng-repeat="employee in ds.employeeList | filter:{name:ds.searchName}">
  <p>{{employee.name}}</p>
</li>

{{employee.name}

因此，当我在fiddle上尝试您的问题时，我遇到了一个问题，即ng model=“searchName”未绑定到模型值

而原因是在这两者之间有一个空间

ng-[space]model. //also ng-model should be in red in your code above but it is in red and black..:P

所以这可能就是这个问题的症结所在

还有一点，不要像这里一样对过滤器使用任何其他参数 使用这个简单的表单

<li ng-repeat="employee in ds.employeeList | filter : searchName">

---

您不能这样做，因为json机制仅限于您所属的域。要做到这一点，你必须使用jsonp

我首先尝试了它…不起作用…无法确定原因。很明显我没看到什么。但是，谢谢你的投入。这是有道理的，但它不起作用。我不明白为什么$scope.ds包含所有正确的数据…但是视图没有更新我的直接想法是过滤器有问题。试着取下过滤器，看看是否有任何作用。另外，如果您使用的是“我的代码”，请确保包含原始行定义

$scope.searchName=“”在控制器顶部，我编辑了代码以反映定义此变量的需要。没有更改。它仍然没有更新视图。所以无序列表根本没有显示？首先确保数据是否来自服务器。输入字段中的
ng-model
（连字符和m之间）中的空格是有意的吗？不，这是StackOverflow独有的感谢提供的信息。它现在正在按照Patrick Grey的建议进行修改。根本问题是JSON格式不正确。然而，正如最初所写，我认为你是对的。
<div ng-app="directory" id="searchSection" ng-controller="DirectoryController">
<input id="searchValue" type="text" ng-model="searchName" />
<div id="listView">
<ul>
  {{searchName}}
    <li ng-repeat="employee in employeeList | filter: searchName">
    <p>{{employee.name}}</p>
    </li>
</ul>
</div>
</div>

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

app.controller('DirectoryController', ['$scope',           
function($scope){
    $scope.searchName = 'Fi';
    $scope.employeeList = [{name : "First Employee", salary : 100}, {name : "Second Employee", salary : 200}];
}]);