使用动态ng模型进行角度表过滤

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

编辑：有没有办法签键从NG-重复搜索[关键]或东西，因为我知道插不工作里面NG-模型

这里是代码：

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

来源

2017-06-26 Absolute Beginer

排序表作为每列的简单的例子，这可以通过使用自定义过滤器也将得到改善，这是基本的例子

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

来源

2017-06-26 11:33:42

是但这是硬编码的，但我需要它是动态的，这意味着NG-模型来自JSON的关键。 –

可以使用Object.keys()方法来填充列的阵列来生成表，然后用于滤波的搜索对象，from the docs：

甲图案对象可用于在过滤特定属性数组包含的对象。例如{名称：“M”，电话：“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>

来源

2017-06-26 12:26:32

使用动态ng模型进行角度表过滤

回答

相关问题