Angular - 如何根据用户选择的选择/选项过滤使用 ng-repeat 显示的数据？答案

【问题标题】：Angular - How to filter data being displayed using ng-repeat based on select/options pick by user?Angular - 如何根据用户选择的选择/选项过滤使用 ng-repeat 显示的数据？
【发布时间】：2017-10-14 23:05:58
【问题描述】：

应根据选项字段（通过 ng-repeating）显示数据（请参见下文）。例如，如果用户选择“The Best Company Denim”，则应该只显示属于该公司的用户。我尝试了过滤器，但这似乎不起作用，我尝试编写一个函数来检查所选选项是否有效，但后来我不知道如何显示它（尝试遍历用户数组并添加到一个新数组，然后 ng-repeat 遍历该数组）。有人可以帮忙吗？谢谢！！！！

    <div ng-app="app" ng-controller="appCtrl">
 <select ng-model="selectedAccount" ng-options="account.name for account in companies" ng-change="change()">
 </select>
   <div ng-repeat="company in companies">
    <div ng-repeat="user in company.users">
        <p>{{user.firstName}} | filter: 'selectedAccount'</p>
    </div>
   <div>
  </div>

app.controller('appCtrl', function($scope){
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123
        }]
    }]
$scope.change = function() {
   var x = "";
   for (var i = 0; i < $scope.selectedAccount.users.length; i++) {
       console.log($scope.selectedAccount.users[i])
       x += $scope.selectedAccount.users[i]
   }
   return x;

} });

【问题讨论】：

标签： angularjs filter angularjs-ng-repeat angular-filters

【解决方案1】：

起初，您以错误的方式使用filter。

Filter 用于数组。所以你必须像这样使用：

<div ng-repeat="element in array | filter: param">

在您的特定情况下，您希望通过 name 属性过滤数组中的元素。所以你应该写如下：

<div ng-repeat="company in companies | filter: { name: selectedAccount }">

另外，在您的ng-options 中，为了将公司名称绑定到selectedAccount 变量，请使用as 语法：

<select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
</select>

请参考以下sn-p：

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('appCtrl', function($scope) {
      $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
          firstName: 'Alex',
          lastName: 'D',
          number: 1234
        }, {
          firstName: 'Sarah',
          lastName: 't',
          number: 14
        }, {
          firstName: 'J',
          lastName: 'd',
          number: 7
        }]
      }, {
        name: 'The Best Company Elegant',
        users: [{
          firstName: 'Alx',
          lastName: 'B',
          number: 1234
        }, {
          firstName: 'Seth',
          lastName: 'w',
          number: 12
        }, {
          firstName: 'J.S',
          lastName: 'B',
          number: 7
        }]
      }, {
        name: 'The Best Company by Julia',
        users: [{
          firstName: 'Aleddddx',
          lastName: 'l',
          number: 1234
        }, {
          firstName: 'Maggy',
          lastName: 'n',
          number: 1
        }, {
          firstName: 'Ja',
          lastName: 'Key',
          number: 123
        }]
      }];
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>

<body ng-controller="appCtrl">
  <div>
    <select ng-model="selectedAccount" ng-options="account.name as account.name for account in companies">
    </select>
    <hr>
    <div>
      Selected company: {{selectedAccount}}
    </div>
    <hr>
    <div ng-repeat="company in companies | filter: { name: selectedAccount }">
      <div ng-repeat="user in company.users">
        <p>{{user.firstName}}</p>
      </div>
      <div>
      </div>
    </div>
  </div>
</body>

</html>

请注意，您甚至不再需要拨打(ng-change)。

【讨论】：