Question

我目前正在开发一个以AngularJS为基础构建的应用程序，并通过prestashop webservice获取数据。获得的所有数据都是通过多个文件排序的JSON个字符串。现在，我正在尝试创建一个搜索框，在用户填写搜索框时过滤掉一些对象。通过使用ng-model和filter:组合，如下所示，这是一种简单的方法：

＆＃13;

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});

＆＃13;

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

＆＃13;

但是，如果你使用两种不同的来源呢？和两个不同的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=...

以下完整示例：

＆＃13;

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!'
        }
    ];
});

＆＃13;

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

＆＃13;

因为您可以看到我能够使用ng-if创建组合，但现在我想创建一个能够搜索这两个字段的搜索输入。这就是我的问题开始的地方。我能够为一次重复创建它。但是，如果我想搜索地址和客户呢？我想创建让用户按客户名称，街道地址和邮政编码搜索的可能性。但邮政编码和地址来自不同的来源。

我希望有人为此找到解决方案，如果您有任何疑问，请在评论中询问。

一如既往，提前谢谢！

Answer 1

我建议将您的客户数组添加到它自己的位置：

$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;
})

通过这种方式，您的模板将更易于阅读，并且您将能够使用之前的搜索。

＆＃13;

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;
    })

});

＆＃13;

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

＆＃13;

一次搜索多个ng-repeats

1 个答案: