function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brandon Barb 4Brandon Barb 4 

Filter a column with Angular?

I am creating a VF page that displays an object and allows searching of the list with Angular.


What I would like to do now is add the capability to filter on a column before searching. For example - A dropdown menu for "Department" that lists the different departments, upon selection the list filters every record with DepartmentA, then search.


How would I go about doing this?


I will eventually integrate this with custom objects, but I am using the Contact object for now until I can figure it out.


Thank you for any help you can provide.

Controller:
 

public with sharing class con_Test {

         public static String getContacts() {
       return JSON.serialize([select id, name, department
           from contact ]);
   }
}
 


VF:

 

apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
<head>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

   <script>

     var App = angular.module('myApp', []);

     App.controller('myctrl', function ($scope) {   

         $scope.contacts = {!contacts}
     });
   </script>

</head>


 <form class="form-inline">
        <div class="form-group">
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
   <table class="table table-bordered">
     <tr>
       <th>Name</th>
       <th>Department</th>
       <th>Id</th>
     </tr>

     <tr ng-repeat="contact in contacts | filter:search">          
       <td>{{contact.Name}}</td>
       <td>{{contact.Department}}</td>
       <td>{{contact.Id}}</td>
     </tr>

   </table>
</body>

</apex:page>
Best Answer chosen by Brandon Barb 4
Raj VakatiRaj Vakati
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
    <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.headers ={!uniDep}
            
            $scope.contacts = {!contacts}
        });
        </script>
        
    </head>
    
    
    <form class="form-inline">
        <div class="form-group">
            Search By 
            <select ng-model="columns" ng-options="e for e in headers">
                <option value=""></option>
            </select>
            
            
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Id</th>
        </tr>
        
        
        <!--filter:{Status: ‘Pass’}| filter:query “
<tr ng-repeat="contact in contacts | filter: {department: contact[columns], name: search}">       
-->
        <tr ng-repeat="contact in contacts |filter: columns |filter: search">       
            
            <td>{{contact.Name}}</td>
            <td>{{contact.Department}}</td>
            <td>{{contact.Id}}</td>
        </tr>
        
    </table>
</body>

</apex:page>
  
public with sharing class con_Test {
    
    public static String getContacts() {
        return JSON.serialize([select id, name, department
                               from contact ]);
    }
    
    public static String getUniDep() {
        Set<String> str = new Set<String>();
        for(Contact con :  [select id, name, department from contact]){
            str.add(con.department);
        }
        
        return JSON.serialize(str);
    }
    
}

 

All Answers

Raj VakatiRaj Vakati
Use this code

  
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
    <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.headers = ['Name','Email','Department'];
            
            $scope.contacts = {!contacts}
        });
        </script>
        
    </head>
    
    
    <form class="form-inline">
        <div class="form-group">
            Search By 
            <select ng-model="columns" ng-options="e for e in headers">
                <option value=""></option>
            </select>
            
            
            <label >Search: </label>
            <input type="text" ng-model="search[columns]" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Id</th>
        </tr>
        
        <tr ng-repeat="contact in contacts | filter:search">          
            <td>{{contact.Name}}</td>
            <td>{{contact.Department}}</td>
            <td>{{contact.Id}}</td>
        </tr>
        
    </table>
</body>

</apex:page>

 
Brandon Barb 4Brandon Barb 4
Hey Raj, thank you, but I actually presented this option to the people this project is for and they did not like it. They specifically wanted to allow the users to filter the results to a certain branch (in this example, Department) and then search for the name.
Raj VakatiRaj Vakati
Option 1 : 

  
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
    <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            // $scope.headers = ['Name','Email','Department'];
            
            $scope.contacts = {!contacts}
        });
        </script>
        
    </head>
    
    
    <form class="form-inline">
        <div class="form-group">
            
            
            
            <label >Search: </label>
            <input type="text" ng-model="search['Department']" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Id</th>
        </tr>
        
        <tr ng-repeat="contact in contacts | filter:search">          
            <td>{{contact.Name}}</td>
            <td>{{contact.Department}}</td>
            <td>{{contact.Id}}</td>
        </tr>
        
    </table>
</body>

</apex:page>

 
Brandon Barb 4Brandon Barb 4
Hey Raj, that's not quite it either. The problem is, not every user is going to know all of the branches (in this case, departments). So they would like for there to be a dropdown that displays every branch/department available in the list.
Raj VakatiRaj Vakati
Hey  Brandon,
Do you want to show all unique department as dropdown and you want the filter on top of it?
Brandon Barb 4Brandon Barb 4
I may be using the term "filter" in the wrong way, but yes, that's generally what I'm looking for. To be able to see a dropdown that shows all departments, I select DepartmentA, all records that have DepartmentA show up, and then I use the search bar to search for the system name.
Raj VakatiRaj Vakati
Cool . Give me some time .. Your code will be ready!
Brandon Barb 4Brandon Barb 4
Raj, you're the best!
Raj VakatiRaj Vakati
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
    <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.headers ={!uniDep}
            
            $scope.contacts = {!contacts}
        });
        </script>
        
    </head>
    
    
    <form class="form-inline">
        <div class="form-group">
            Search By 
            <select ng-model="columns" ng-options="e for e in headers">
                <option value=""></option>
            </select>
            
            
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Id</th>
        </tr>
        
        
        <!--filter:{Status: ‘Pass’}| filter:query “
<tr ng-repeat="contact in contacts | filter: {department: contact[columns], name: search}">       
-->
        <tr ng-repeat="contact in contacts |filter: columns |filter: search">       
            
            <td>{{contact.Name}}</td>
            <td>{{contact.Department}}</td>
            <td>{{contact.Id}}</td>
        </tr>
        
    </table>
</body>

</apex:page>
  
public with sharing class con_Test {
    
    public static String getContacts() {
        return JSON.serialize([select id, name, department
                               from contact ]);
    }
    
    public static String getUniDep() {
        Set<String> str = new Set<String>();
        for(Contact con :  [select id, name, department from contact]){
            str.add(con.department);
        }
        
        return JSON.serialize(str);
    }
    
}

 
This was selected as the best answer
Raj VakatiRaj Vakati
Use the above code 
Brandon Barb 4Brandon Barb 4
Raj this is perfect!! Thank you so much!
Brandon Barb 4Brandon Barb 4
Hey Raj, is it possible for me to add multiple dropdown boxes for multiple columns?
Raj VakatiRaj Vakati
Yes
Brandon Barb 4Brandon Barb 4
Would that be as simple as adding additional "str.add" to the controller?
Brandon Barb 4Brandon Barb 4

Hey Raj, I figured out a way to get dropdowns for multiple columns, but they overwrite each other. Is it possible to have them work in conjunction?

For example - I want to select the dropdown for Department, then select a dropdown for Name, and then search.
Raj VakatiRaj Vakati
Can you share the code ..i can rewrite it for you 
Brandon Barb 4Brandon Barb 4

Controller:

public with sharing class con_Test {
    
    public static String getContacts() {
        return JSON.serialize([select id, name, department
                               from contact ]);
    }
    
    public static String getUniDep() {
        Set<String> str = new Set<String>();
        for(Contact con :  [select id, name, department from contact]){
            str.add(con.department);
        }
        
        return JSON.serialize(str);
    }
    
        public static String getUniDep2() {
        Set<String> str = new Set<String>();
        for(Contact con :  [select id, name, department from contact]){
            str.add(con.name);
        }
        
        return JSON.serialize(str);
    }
    
    
}


VF:
  
apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="con_Test">  
    <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.headers ={!uniDep}
$scope.headers2 ={!uniDep2}
            
            $scope.contacts = {!contacts}
        });
        </script>
        
    </head>
    
    
    <form class="form-inline">
        <div class="form-group">
            Search By 
            <select ng-model="columns" ng-options="e for e in headers">
                <option value=""></option>
            </select>

Search By Name
            <select ng-model="columns" ng-options="e for e in headers2">
                <option value=""></option>
            </select>
            
            
            <label >Search: </label>
            <input type="text" ng-model="search" class="form-control" placeholder="Search"></input>
    </div>
</form>

<body ng-app="myApp" class="container" ng-controller="myctrl">
    <table class="table table-bordered">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Id</th>
        </tr>
        
        
        <!--filter:{Status: ‘Pass’}| filter:query “
<tr ng-repeat="contact in contacts | filter: {department: contact[columns], name: search}">       
-->
        <tr ng-repeat="contact in contacts |filter: columns |filter: search">       
            
            <td>{{contact.Name}}</td>
            <td>{{contact.Department}}</td>
            <td>{{contact.Id}}</td>
        </tr>
        
    </table>
</body>

</apex:page>

 
Brandon Barb 4Brandon Barb 4
I may have done the controller improperly
Brandon Barb 4Brandon Barb 4
Hey Raj, you there?
Steave JamesSteave James
This is a known issue with the Angular/ionic framework. The best workaround is to use a different framework for your login page. (https://mmcgbl.com/angular-development/)