使用动态 ng-model 进行角表过滤答案

【问题标题】：Angular table filtering with dynamic ng-model使用动态 ng-model 进行角表过滤
【发布时间】：2017-11-29 05:27:02
【问题描述】：

我已经完成了一些基本的 Angular 过滤，但我遇到了一个小问题，我不知道如何解决它。我有一个带有输入标题的表格。我希望每个输入都按该列过滤表格。问题是尝试将 ng-model 动态设置为相应的列名。我可以硬编码它，但我需要它动态。有没有人做过类似的事情？

编辑：有什么方法可以将密钥从 ng-repeat 签名到 search[key] 之类的，因为我知道插值在 ng-model 中不起作用

代码如下：

<table class="table table-striped">
                    <thead>
                        <tr ng-repeat="item in vm.students | limitTo:1">
                            <th ng-repeat="(key, val) in item">
                                {{key | format}}
                            </th>
                        </tr>
                        <tr ng-repeat="item in vm.students | limitTo:1">
                            <th ng-repeat="(key, val) in item">
                                <input type="text" ng-model='search.key'>
                            </th>
                            <tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.students | filter:search.key ">
                            <td> {{item.id}}</td>
                            <td> {{item.car}}</td>
                            <td> {{item.payment_method}}</td>
                            <td> {{item.currency}}</td>
                            <td> {{item.city}}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                    </tfoot>
                </table>

【问题讨论】：

标签： angularjs filter

【解决方案1】：

按列排序表格的简单示例，这也可以通过使用自定义过滤器来改进，这是基本示例

<html>

<head>
    <title>Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
    </script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller("firstCtrl", function($scope) {
        $scope.books = [{
            name: "Angular",
            authur: "James",
            price: 500,
            year: 2012

        }, {
            name: "Java",
            authur: "Durga",
            price: 700,
            year: 2001

        }, {
            name: "HTML",
            authur: "Rahul",
            price: 1500,
            year: 2011

        }, {
            name: "CSS",
            authur: "Anand",
            price: 2500,
            year: 2002

        }, {
            name: "Node",
            authur: "Rade",
            price: 550,
            year: 2015

        }];

    });
    </script>
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="firstCtrl">
            <table border="1">
                <tr>
                    <th >Name</th>
                    <th>Authur</th>
                    <th >Price</th>
                    <th>Year</th>
                    
                </tr>
                <tr>
                    <td>
                        <input type="text" ng-model="filterWithName" />
                    </td>
                    <td>
                        <input type="text" ng-model="filterWithAuthur"/>
                    </td>
                    <td>
                        <input type="text" ng-model="filterWithPrice" />
                    </td>
                    <td>
                        <input type="text" ng-model="filterWithYear" />
                    </td>
                </tr>
                <tr ng-repeat="book in books | filter:{name:filterWithName,authur:filterWithAuthur,price:filterWithPrice,year:filterWithYear}">
                    <td>{{book.name}}</td>
                    <td>{{book.authur}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.year}}</td>
                    
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

【讨论】：

是的，但这是硬编码的，但我需要它是动态的，这意味着 ng-model 来自 json 键。

【解决方案2】：

您可以使用Object.keys() 方法填充列数组以生成表格，然后使用搜索对象进行过滤，from the docs：

模式对象可用于过滤对象的特定属性由数组包含。例如 {name:"M", phone:"1"} 谓词将返回属性名称包含“M”的项目数组和包含“1”的属性电话。

这是一个例子：

angular.module('app', [])
.controller('mainController', function mainController($scope) {
    $scope.students = [
      { name: 'Aaron Judge', year: 'one', mark: 98 },
      { name: 'Ryan Zimmerman', year: 'two', mark: 76 },
      { name: 'Paul Goldschmidt', year: 'one', mark: 87 },
      { name: 'Mike Trout', year: 'two', mark: 89 },
      { name: 'Charlie Blackmon', year: 'one', mark: 77 },
      { name: 'Bryce Harper', year: 'three', mark: 67 },
      { name: 'Jose Altuve', year: 'two', mark: 83 },
    ];   
    
    $scope.columns = Object.keys($scope.students[0]);
    
    $scope.search = {};
});

body { padding-top:50px; }
table input { color: black; }

<!-- CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">

<!-- JS -->
<script  src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>


<body ng-app="app">
  <div class="container" ng-controller="mainController">
    <div class="alert alert-info">
      <h2>Students ({{search}})</h2>
      <table class="table table-bordered">
          <thead>
              <tr>
                  <th ng-repeat="column in columns track by column">{{ column }}</th>
              </tr>
              <tr>
                <th ng-repeat="column in columns track by column">
                  <input type="text" ng-model="search[column]"> 
                </th>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="student in students | filter:search track by student.name">
                <td ng-repeat="column in columns track by column">{{ student[column] }}</td>
              </tr>
          </tbody>
      </table>
    </div>
  </div>
</body>

【讨论】：