Question

应根据选项字段显示数据（通过ng-repeating）（请参见下文）。例如，如果用户选择“最佳公司牛仔布”，则只应显示属于该公司的用户。我尝试过滤器，但这似乎不起作用，我试图编写一个功能，检查所选的选项，但我不知道如何显示（尝试循环用户）数组并添加到一个新数组，然后通过该数组进行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;

} }）;

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

请参阅以下代码段：

(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)。

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

1 个答案: