Как искать данные JSON, созданные на другом сервере, с помощью AngularJS

0

У меня есть данные для поиска. Я пишу приложение каталога в 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>
  • 0
    Сначала убедитесь, что данные поступают с сервера или нет.
  • 0
    Является ли пространство в ng- model (между дефисом и m) в поле ввода преднамеренным?
Показать ещё 1 комментарий
Теги:

4 ответа

0

Вы не можете, потому что механизм json ограничен доменом, которым вы принадлежите. Для этого вы должны использовать jsonp

Поделиться
0

Поэтому, когда я пытался решить вашу проблему на скрипке, я столкнулся с проблемой, и это 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>

ЯШ:

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}];
}]);
Поделиться
  • 0
    Спасибо за информацию. Теперь он работает с изменениями, предложенными Патриком Греем. Основной проблемой был неправильно отформатированный JSON. Однако, как изначально написано, я думаю, что вы правы.
0

Лучше использовать фабрику для вашей службы, чтобы служба хранила данные для вас и ссылалась на нее в вашем контроллере. Что-то в этом направлении должно работать:

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>
Поделиться
  • 0
    Это имеет смысл, но это не работает. Я не могу понять, почему. $ scope.ds содержит все нужные данные ... но представление не обновляется
  • 0
    Мои ближайшие мысли были бы что-то не так с фильтром. Попробуйте снять фильтр и посмотреть, поможет ли это.
Показать ещё 13 комментариев
0

Когда я добавлял фильтры, я просто добавляю вход с ng-model:

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

Это должно фильтровать все имена.

Поделиться
  • 0
    Я попробовал это сначала ... не работает ... не могу определить, почему. Есть что-то очевидное, чего я не вижу. Но спасибо за вклад.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню