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 

Default Sort Order with Angular?

I'm creating a VF page that allows searching/sorting of a custom object using AngularJS. 

I was able to get the sorting to work, but is there a way for me to set one column to be sorted when the page is loaded?
ie. I want my Name column to be in alphabetical order when the page loads.

<script>
      
     var App = angular.module('myApp', []);
  
     App.controller('myctrl', function ($scope) {   
     
              $scope.contacts = {!contacts}
                  $scope.sort = function(keyname){
                  
             $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }
    
                
     });
     
   
   </script>
Best Answer chosen by Brandon Barb 4
Raj VakatiRaj Vakati
working copy is here 
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="exampleCon">
    
    
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        
        <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
            <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
        <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.sortKey ='Name';
            $scope.contacts = {!contacts}
            $scope.sort = function(sortKey){
                
                
                $scope.sortKey = sortKey;   //set the sortKey to the param passed
                  $scope.reverse = ($scope.sortKey === sortKey) ? !$scope.reverse : false;

                
            }
            
            
        });
        
        
        </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 ng-click="sort('Name')"  ng-class="{reverse: reverse}">
                <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse" >
                    Name
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                </a>
            </th>
            
            
            <th ng-click="sort('Name')"  ng-class="{reverse: reverse}">
                <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
                    Email
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                </a>
            </th>
            
            <th ng-click="sort('Id')"  ng-class="{reverse: reverse}">Id</th>
        </tr>
        <tr ng-repeat="contact in contacts|orderBy:sortKey:reverse|filter:search">          
            <td>{{contact.Name}}</td>
            <td>{{contact.Name}}</td>
            <td>{{contact.Id}}</td>
        </tr>
    </table>
</body>
</apex:page>

 

All Answers

Gaurish Gopal GoelGaurish Gopal Goel
Hi Brandon,

Try this $scope.columnToOrder = 'col_1';

If this answer solves your problem then mark it as the solution to help others. Thanks.
Raj VakatiRaj Vakati

Yes ...which will sort based on the same in this example 


   $scope.sortType = 'Name'; // set the default sort type

 <tr ng-repeat="c in filteredContacts | orderBy:sortType:sortReverse">
                            <td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
                            <td>{{ c.Phone }}</td>
                        </tr>



Complete code 

  
<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
    <style>
        body { font-size: 12px !important; }
    </style>
    <html>
        <head>
            <title>Testing</title>
            <meta charset="utf-8"/>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            
            <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
                <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
            <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
            
            
            <apex:remoteObjects >
                <apex:remoteObjectModel name="Contact" fields="Name,Phone,Id" jsShorthand="dbContacts"/>
                    </apex:remoteObjects>
                <script>
                    var app = angular.module('myApp', ['ui.bootstrap']);
            app.controller('myCtrl', function($scope) {
                $scope.sortType = 'Name'; // set the default sort type
                $scope.sortReverse = false;
                $scope.contacts=[];
                $scope.searchText='';
                $scope.currentPage = 1;
                $scope.numPerPage = 5;
                $scope.maxSize = 5;
                $scope.filteredContacts = [];
                
                $scope.fetchContacts = function() {
                    var dbCon = new SObjectModel.dbContacts();
                    console.log(dbCon);
                    dbCon.retrieve({ limit: 500
                                   },
                                   function(err, records, event){
                                       $scope.$apply(function () {
                                           if(err) {
                                               alert(err.message);
                                           }
                                           else {
                                               $scope.contacts.splice(0,$scope.contacts.length);
                                               records.forEach(function(record) {
                                                   $scope.contacts.push({"Name" :record.get("Name"),"Id" :record.get("Id"),"Phone":record.get("Phone")
                                                                        }); // it was % in place of $ with scope earlier
                                               });
                                               
                                               
                                               $scope.$watch('currentPage + numPerPage', function() {
                                                   var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                                                   , end = begin + $scope.numPerPage;
                                                   
                                                   $scope.filteredContacts = $scope.contacts.slice(begin, end);
                                               });
                                               
                                               
                                           }
                                       });
                                   });
                };
            });
            
            
            </script>
        </head>
        
        <body>
            <div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">
                
                <div class="col-sm-4 pull-left">
                    <div class="col-sm-2">
                        <label for="searchText">Search:</label>
                    </div>
                    <div class="col-sm-10">
                        <input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
                    </div>
                </div>
                
                <table class="table table-bordered table-striped">
                    <thead><tr>
                        <th>
                            <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
                                First Name
                                <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Branch__c'; sortReverse = !sortReverse">
                                Branch
                                <span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
                                Functional Area
                                <span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
                                Description
                                <span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in filteredContacts | orderBy:sortType:sortReverse">
                            <td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
                            <td>{{ c.Phone }}</td>
                        </tr>
                    </tbody>
                    
                </table>
                <pagination 
                            ng-model="currentPage"
                            total-items="contacts.length"
                            max-size="maxSize"  
                            boundary-links="true">
                </pagination>
            </div>
            
        </body>
        
        
    </html>
</apex:page>


 
Brandon Barb 4Brandon Barb 4

Hey Raj, my code has changed quite a bit since yesterday (I'm trying to learn as much as I can in a very short amount of time). 
Will I be able to just add $scope.sortType = 'Name'; // set the default sort type into my code below?

<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="ContactSearchController">
 
 
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   
 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            
            <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
                <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
            <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>

   <script>
      
     var App = angular.module('myApp', []);
  
     App.controller('myctrl', function ($scope) {   
     
              $scope.contacts = {!contacts}
                  $scope.sort = function(keyname){
                  
             $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
        
    }
    
                
     });
     
   
   </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 ng-click="sort('Name')">
       <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
Name
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
       </th>
       
       
       <th ng-click="sort('Name')">
       <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
Email
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
       </th>
       
       <th ng-click="sort('id')">Id</th>
     </tr>
     <tr ng-repeat="contact in contacts|orderBy:sortKey:reverse|filter:search">          
       <td>{{contact.Name}}</td>
       <td>{{contact.Name}}</td>
       <td>{{contact.Id}}</td>
     </tr>
   </table>
</body>
</apex:page>
Raj VakatiRaj Vakati
Can you share the ContactSearchController code as well .. i will fix it for you 
Brandon Barb 4Brandon Barb 4

Raj - here's my controller - 

public with sharing class ContactSearchController {
  
      
 public static String getContacts() {
       return JSON.serialize([select id, name
           from con_AppCatalog__c ]);
   }
}
Raj VakatiRaj Vakati
working copy is here 
<apex:page showHeader="false" applyHtmlTag="false" docType="html-5.0" controller="exampleCon">
    
    
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        
        
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        
        <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
            <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
        <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
        
        <script>
            
            var App = angular.module('myApp', []);
        
        App.controller('myctrl', function ($scope) {   
            $scope.sortKey ='Name';
            $scope.contacts = {!contacts}
            $scope.sort = function(sortKey){
                
                
                $scope.sortKey = sortKey;   //set the sortKey to the param passed
                  $scope.reverse = ($scope.sortKey === sortKey) ? !$scope.reverse : false;

                
            }
            
            
        });
        
        
        </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 ng-click="sort('Name')"  ng-class="{reverse: reverse}">
                <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse" >
                    Name
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                </a>
            </th>
            
            
            <th ng-click="sort('Name')"  ng-class="{reverse: reverse}">
                <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
                    Email
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                </a>
            </th>
            
            <th ng-click="sort('Id')"  ng-class="{reverse: reverse}">Id</th>
        </tr>
        <tr ng-repeat="contact in contacts|orderBy:sortKey:reverse|filter:search">          
            <td>{{contact.Name}}</td>
            <td>{{contact.Name}}</td>
            <td>{{contact.Id}}</td>
        </tr>
    </table>
</body>
</apex:page>

 
This was selected as the best answer
Brandon Barb 4Brandon Barb 4
Raj, thank you again! I truly appreciate it! I never would have been able to finish this project without your help.