Функция фильтра не отображает результаты
У меня есть следующая функция, которую я написал для фильтрации данных на основе пользовательского ввода.
контроллер
var app = angular.module("viewJSON",[]);
app.controller("viewCtrl",function Hello($scope, $http) {
$http({
method: 'GET',
url: './data.json'
}).then(function (response){
$scope.products = response.data;
},function (error){
console.info("error");
});
var data=[];
$scope.filterData = function ($scope) {
if ($scope.names.length != 0 && $scope.brands.length != 0){
data.push(products.name.includes($scope.names) && products.brand.includes($scope.brands));
}else if ($scope.names.length == 0 && $scope.brands.length != 0){
data.push(products.brand.includes($scope.brands));
}else if ($scope.names.length != 0 && $scope.brands.length == 0){
data.push(products.name.includes($scope.names));
}
return data;
}
});
HTML
<!DOCTYPE html>
<html ng-app = "viewJSON">
<head>
<link rel = "stylesheet" href = "home-page.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src = "home-page.js"></script>
</head>
<body ng-controller = "viewCtrl">
<div class = "wrap">
<div class = "search" ng-innit = "x=0">
<b>Product Name:</b> <input type = "text" ng-model = "names" class = "searchTerm" ng-keydown = "x = x+1"><br>
<b>Product Brand:</b> <input type = "text" ng-model = "brands" class = "searchTerm" ng-keydown = "x = x+1">
</div>
</div>
<div>
<table class = "resultContent" ng-if = "x > 0">
<tr>
<th>Brand</th>
<th>Name</th>
<th>Price</th>
<th>Retailer</th>
<th>Image</th>
</tr>
<tr id = "rows" ng-repeat = "item in filterData">
<td class = "otherCol">{{ item.brand }}</td>
<td class = "otherCol">{{ item.name }}</td>
<td class = "otherCol">{{ item.price }}</td>
<td class = "otherCol">{{ item.retailer }}</td>
<td class = "imageCol"><img ng-src = "{{ item.image_url}}"></td>
</tr>
</table>
</div>
</body>
</html>
Я некоторое время играл с этим, и, насколько мне известно, функция создает массив на основе ввода пользователей, этот массив затем отображается с помощью ng-repeat. Я попытался использовать filterBy: filterData, хотя это дает мне фильтр ошибок, а не массив, который меня смущает, поскольку вывод из filterData представляет собой массив. У меня такое ощущение, что ng-модель неправильно связывает значения «имена» и «бренды» в функции. Точка в правильном направлении будет оценена.
Файл JSON имеет следующий формат: {"product0": {"name": "Junior Girls Rainbow Birds Backpack", "brand": "GUCCI", "price": "\u00a3645.00", "gender": "kids : девушки", "master_cat": "аксессуары", "sub_cat": "другое", "продавец": "Фланели", "image_url": "images.flannels.com/images/products/71007099_5pl.jpg"}
Нет проблем с разбором данных в объект js, так как он работал до использования ng-repeat менее эффективным способом.
data.push(products.name.includes($scope.names) - вам не следует использовать $scope.products.name...? Я не вижу переменную products.name
Я изменил все ссылки на продукты на $scope.products, но это все еще не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Причина, по которой вы не видите никаких результатов, заключается в ваших filterData, поскольку filterData — это функция, и поэтому для ее использования вам необходимо использовать следующий синтаксис.
ng-repeat = "item in filterData()"
обратите внимание на скобки в конце. Также имейте в виду, что использование функции в ng-repeat не является хорошей практикой, поскольку она вызывается при каждом обновлении DOM и добавляет много ненужной работы. Я настоятельно рекомендую вам поместить отфильтрованные данные в массив и использовать этот массив в вашем ng-repeat.
Можете ли вы предоставить файл data.json?