使用動態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模型進行角度表過濾

回答

相關問題