У меня есть данные для поиска. Я пишу приложение каталога в 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>
Вы не можете, потому что механизм json ограничен доменом, которым вы принадлежите. Для этого вы должны использовать jsonp
Поэтому, когда я пытался решить вашу проблему на скрипке, я столкнулся с проблемой, и это 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}];
}]);
Лучше использовать фабрику для вашей службы, чтобы служба хранила данные для вас и ссылалась на нее в вашем контроллере. Что-то в этом направлении должно работать:
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>
Когда я добавлял фильтры, я просто добавляю вход с 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>
Это должно фильтровать все имена.
ng- model
(между дефисом и m) в поле ввода преднамеренным?