Angular table filtering with dynamic ng-model

Question

I've done some basic Angular filtering but i encountered a little problem, and I don't know how to solve it. I have a table with heading with input. I want each input to filter the table by that column. The problem is trying to dynamically set ng-model to a corresponding column name. I can hard code it, but I need it dynamically. Has anyone done something like that before?

EDIT: Is there any way to sign key from ng-repeat to search[key] or something because i know interpolation doesn't work inside ng-model

Here is the code:

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

Stanislav Kvitash · Accepted Answer · 2017-06-26 14:18:14Z

You can use Object.keys() method to populate an array of columns to generate your table and then use a search object for filtering, from the docs:

A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1".

Here is an example:

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>

Srinivas ML · Accepted Answer · 2017-06-26 11:33:42Z

Simple example of sorting table as per column , this can be improved by using custom filters also , this is basic example

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

Yes but this is hard coded, but i need it to be dynamic which means ng-model comes from json key.

Collectives™ on Stack Overflow

Angular table filtering with dynamic ng-model

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related