一次搜索多个ng-repeats [英] Searching through multiple ng-repeats at once
问题描述
我目前正在使用以AngularJS为基础构建的应用程序，该应用程序通过
i'm currently working on an application that is build with AngularJS as a base, and that obtains data through the prestashop webservice. All data obtained are JSON strings sorted through multiple files. Now i'm trying to create a searchbox that filters through some objects the moment the user fills in the searchbox. The easy way is ofcourse by using the ng-model and filter: combination like below:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
但是，如果您使用两种不同的来源怎么办?和两个不同的ng-repeats?
因此，在我的应用程序中，一些数据与客户有关.数据是通过两个不同的$http.get()函数获得的.一是为客户提供基本信息.第二个是地址信息.在下面看看:
But what if you're using two different sources? and two different ng-repeats?
So in my application some of the data is about customers. The data is obtained through two different $http.get() functions. One is for the customers basic information. The second one is the address information. Take a look below:
// Get the customers
$http.get('config/get/getCustomers.php', {cache: true}).then(function(response){
$scope.customers = response.data.customers.customer
});
// Get the addresses
$http.get('config/get/getAddress.php', {cache: true}).then(function (response) {
$scope.addresses = response.data.addresses.address
});
通过使用ng-repeat和ng-if，我可以过滤信息并将其连接在一起. ng-if="customer.id == address.id_customer" ng-repeat=...
By using ng-repeat and ng-if i'm able to filter the information and connect it together. ng-if="customer.id == address.id_customer" ng-repeat=...
下面的完整示例:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<div ng-repeat="customer in customers">
<div ng-bind="customer.id + ' - ' + customer.name"></div>
<div ng-if="customer.id == address.id_customer" ng-repeat="address in addresses" ng-bind="address.place">
</div>
</div>
</div>
因此，如您所见，我能够创建与ng-if的组合，但是现在我想创建一个能够在两个字段中进行搜索的搜索输入.这就是我的问题开始的地方.我能够为一个ng-repeat创建它.但是，如果我想搜索地址和客户怎么办?我想创造一种可能性，让用户通过客户名称，街道地址和邮政编码进行搜索.但是邮政编码和地址来自不同的来源.
So as you can see i'm able to create the combination with the ng-if but now i would like to create a search input that's able to search through both fields. And that's where my issue starts. I'm able to create it for one ng-repeat. But what if i want to Search on the address and the customer? I would like to create the possibility of letting the user search by customer name, street address and ZIP code. But the ZIP code and address are from a different source.
我希望有人找到了解决方案，如果您有任何疑问，请在评论中询问他们.
I hope that someone has found a solution for this and if you have any questions please ask them in the comments.
一如既往，在此先感谢您！
As always, thanks in advance!
推荐答案
我建议通过以下方式将您的客户数组映射到添加到其自己位置的每个对象:
I'd suggest to map your customers array adding to each object it's own place this way:
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
这样，您的模板将更易于阅读，并且可以使用之前的搜索结果.
This way your template will be easier to read, and you will be able to use your previous search.
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<div ng-repeat="customer in customers | filter:test">
{{ customer.id }} - {{ customer.name }}
<br>
{{ customer.place}}
</div>
</div>
</div>
这篇关于一次搜索多个ng-repeats的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
