Download 100% FREE Office Document APIs for .NET
DotNetFunda.com
Online: 588
Home > Forums > AngularJS 1x >

How to sort the following code using angularjs [Resolved]

Posted by Tsurendra690-29180 under AngularJS 1x on 2/2/2017 | Points: 10 | Views : 867 | Status : [Member] | Replies : 5
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
Can any one help me to sort the following table
<!DOCTYPE html>
<html>
<head>
    <script>
        var app = angular.module('myapp', []);
        app.controller('myctrl', function ($scope) {
          $scope.collectionCopy = [];
          $scope.hided = false;
            $scope.collection = [
                { Google: 'Dhoni', Facebook: 'Simla', Twitter: '5000' },
                { Google: 'Kohli', Facebook: 'Manali', Twitter: '15000' },
                { Google: 'Virat', Facebook: 'Rajasthan', Twitter: '35000' },
                { Google: 'Yuvraj', Facebook: 'Kerala', Twitter: '35000' },
                { Google: 'Singh', Facebook: 'Mysore', Twitter: '35000' },
                { Google: 'Murali', Facebook: 'OOTY', Twitter: '20000' },
                { Google: 'Vijay', Facebook: 'Goa', Twitter: '20000' }
            ];
            //Object to hold user input
            $scope.userInput = {};
            //fetch the value and assign to UserInput variable
            $scope.search = function (event) {
                if (event.keyCode == 13) {
                    $scope.searcher();
                }
            }
            $scope.searcher = function() {
              $scope.userInput = $scope.Google;
            }
            angular.copy($scope.collection,$scope.collectionCopy);

            $scope.hide = function()
            {
                $(".col2").toggle(1000);
              angular.copy($scope.collection,$scope.collectionCopy);
              if($scope.hided == false)
              {
                for(var i = 0; i < $scope.collectionCopy.length; i++) {
                    var obj = $scope.collectionCopy[i];

                    //if(listToDelete.indexOf(obj.id) !== -1) {
                        delete obj['Facebook'];
                        delete obj['Twitter'];

                    //}
                }
                $scope.hided = true;
              }
              else
              {
                angular.copy($scope.collection,$scope.collectionCopy);
                $scope.hided = false;
              }
            }


        });
    </script>
</head>
<body ng-app="myapp">
    <div ng-controller="myctrl">
        <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" ng-keyup="search($event)" style="background-color:#5b2c2c;color:white;">
        <input type="button" value="Search" ng-click="searcher()">
        <table class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green">
            <thead>
                <tr>
                    <th ng-click="hide()" class="col1"><a>Google</a></th>
                    <th ng-hide="hided" class="col2"><a>Facebook</a></th>
                    <th ng-hide="hided" class="col2"><a>Twitter</a></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="record in collectionCopy | filter:userInput" ng-class-even="'stripped'">
                    <td >{{record.Google}}</td>
                    <td ng-hide="hided"  class="col2">{{record.Facebook}}</td>
                    <td ng-hide="hided"  class="col2">{{record.Twitter}}</td>
                </tr&
                           
                


                    
                    


                
                           

                
Reply | Reply with Attachment

                               

 Alert Moderator 

Responses

Posted by: Rajnilari2015 on: 2/2/2017 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
@Tsurendra690-29180 Sir,
Please try this 

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>



<div ng-app="myApp" ng-controller="orderCtrl">



<p>The array items are sorted by "Google".</p>



<ul>

<li ng-repeat="x in collection | orderBy : 'Google'">

    {{x.Google }}

</li>

</ul>



</div>



<script>

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

app.controller('orderCtrl', function($scope) {    

    

    $scope.collection = [

                { Google: 'Dhoni', Facebook: 'Simla', Twitter: '5000' },

                { Google: 'Kohli', Facebook: 'Manali', Twitter: '15000' },

                { Google: 'Virat', Facebook: 'Rajasthan', Twitter: '35000' },

                { Google: 'Yuvraj', Facebook: 'Kerala', Twitter: '35000' },

                { Google: 'Singh', Facebook: 'Mysore', Twitter: '35000' },

                { Google: 'Murali', Facebook: 'OOTY', Twitter: '20000' },

                { Google: 'Vijay', Facebook: 'Goa', Twitter: '20000' }

            ];

});

</script>



</body>

</html>


Output
---------- 
The array items are sorted by "Google".



Dhoni

Kohli

Murali

Singh

Vijay

Virat

Yuvraj


N.B.~ If in case you need to sort by multiple columns, try this 
orderBy : ['Google','Facebook','Twitter']


Hope that helps

--
Thanks & Regards,
RNA Team

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Key123 on: 2/2/2017 [Member] Starter | Points: 25

Up
1
Down
you can use order by filter for sort the collectioncopy 
ng-repeat="record in collectionCopy | filter:userInput|orderBy:'Google'"



Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Key123 on: 2/2/2017 [Member] Starter | Points: 25

Up
1
Down
Hi,
Below ng-repeat code is working 
ng-repeat="record in collectionCopy | filter:userInput | orderBy:'Google'"

orderBy filter sorts the array. default it will sort ascending order.
orderBy:'Google' this will sorts based on the values of Google model object.


Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Webmaster on: 2/2/2017 [Administrator] HonoraryPlatinum | Points: 25

Up
0
Down
Dear Tsurendra690-29180

Please submit your full code in the following forum, so that its easy to solve your question.




Best regards,
Webmaster
http://www.dotnetfunda.com

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Tsurendra690-29180 on: 2/2/2017 [Member] Starter | Points: 25

Up
0
Down
Thanks for giving reply Key123,

I tried your code, but i did not get sorted, Can you explain in detail with full code

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts