如何使用AngularJS搜索源自另一臺服務器的JSON數據

我有數據要搜索。我正在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>

來源

2015-12-04 user2220638

首先確保數據來自服務器或不。 –

輸入字段中的'ng-model'（連字符與m之間）是否有意使用？ –

不，這是獨一無二的stackoverflow – user2220638

當我已經添加過濾器我簡單的添加輸入與NG-型號：

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

然後在我ng-repeat：

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

應該過濾所有名稱。

來源

2015-12-04 20:14:07 Mickers

我試着第一...不工作...不能確定爲什麼。有一件事很明顯，我沒有看到。但是，感謝您的意見。 – user2220638

更好地爲您的服務使用工廠，讓服務爲您保留數據，並在您的控制器中引用它。沿着這些線路的東西應該工作：

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>

來源

2015-12-04 20:17:18

這很有道理，但它不起作用。我無法弄清楚爲什麼。 $ scope.ds包含所有正確的數據...但視圖不更新 – user2220638

我的直接想法是過濾器有問題。試着把過濾器關掉，看看有沒有做任何事情。 –

此外，如果您準確使用我的代碼，請確保在控制器的頂部包含定義'$ scope.searchName =「」;'的原始行，我編輯了代碼以反映需要定義此變量。 –

所以，當我在小提琴上嘗試你的問題時，我遇到了一個問題，那就是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">

這裏是我的撥弄工作液Fiddle Solution

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

JS：

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}]; 
}]);

來源

2015-12-08 04:47:12

感謝您的信息。它現在正在與Patrick Gray所提出的改變一起工作。根本問題是格式不正確的JSON。然而，正如原來寫的，我認爲你是對的。 – user2220638

你不能因爲機制JSON僅限於你所屬的域。要做到這一點，你必須使用jsonp

來源

2016-04-13 07:39:47 Daniel

如何使用AngularJS搜索源自另一臺服務器的JSON數據

回答

相關問題