我目前正在开发一个以 AngularJS 为基础构建的应用程序，它通过 prestashop webservice 获取数据。 。获取的所有数据都是通过多个文件排序的 JSON 字符串。现在我正在尝试创建一个搜索框，当用户填写搜索框时，该搜索框会过滤某些对象。最简单的方法当然是使用 ng-model 和 filter: 组合，如下所示:
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()函数获取的。一是客户的基本信息。第二个是地址信息。请看下面:
// 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=...
下面是完整的示例:
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 创建它。但是如果我想搜索地址和客户怎么办？我想创造一种可能性，让用户可以通过客户姓名、街道地址和邮政编码进行搜索。但邮政编码和地址来自不同的来源。
我希望有人找到了解决方案，如果您有任何疑问，请在评论中询问他们。
一如既往，提前致谢!
最佳答案
我建议映射您的客户数组，以这种方式添加到它自己的位置的每个对象:
$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;
})
这样您的模板将更易于阅读，并且您将能够使用以前的搜索。
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>关于javascript - 一次搜索多个 ng-repeats，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48325547/