orderBy -> element in an array AngularJS

58 views
Skip to first unread message

Awks Dine

unread,
Aug 7, 2014, 1:39:43 PM8/7/14
to ang...@googlegroups.com
Hi, I have problem with my code today,

I don't know how to orderBy an element in an array.
I need to order in my SELECT the kills of every champions, yeah... league of legends.

 ^^' I'm trying to make a score classement.

here is my code :

HTML (index.html)
<!doctype
<html ng-app="ClassementChamps">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/local.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>


<body ng-controller="ChampController as champ">

<!-- search champion -->

<section id="search">
    <label>search: <input type="text" ng-model="search"/></label>

    <select class="search" ng-model="order">
        <option value="score.kills">score.kills</option>
        <option value="sex">sex</option>
    </select>
</section>

<!-- main-content -->

<section id="main-content">

<ol>
    <li ng-repeat="information in champ.infos | filter:search | orderBy:order:true">
        <div class="champsCore">
            <a href="{{information.page}}">
                {{information.champion + ' is a ' + information.sex + ', ' + information.lane}}
            </a>

            <p ng-repeat="score in information.score">
                Score: {{score.kills + ' / ' + score.mort + ' / ' + score.assistances}}.
            </p>
        </div>
    </li>
</ol>

</section>

<!-- footer -->

<section id="footer">
    <div id="totalChamps" ng-hide="search">
            there is
            <strong>{{remaining}}</strong> champs,
            <strong>{{adc}}</strong> marksam,
            <strong>{{support}}</strong> support.
        </p>
    </div>
</section>

<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>


JAVASCRIPT (app.js)

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

app.controller('ChampController', ['$http', '$scope', 'filterFilter', function($http, $scope, filterFilter){
        var champ = this;
        champ.infos = [];

        $http.get('js/champions.php').success(function(data){
            champ.infos = data;
        });


        $scope.$watch('champ.infos', function(){
            $scope.remaining = $scope.champ.infos.length;
        }, true);

        $scope.$watch('champ.infos', function(){
            $scope.adc = filterFilter($scope.champ.infos, {lane:'marksam'}).length;
        }, true);

        $scope.$watch('champ.infos', function(){
            $scope.support = filterFilter($scope.champ.infos, {lane:'support'}).length;
        }, true);


               
        }]);


Data JSON in php file

[



{

 "champion": "Ashe",
 "sex":"female",
 "lane":"marksam",
 "page":"#Ashe",
 "score":[{"kills":"9", "mort":"2", "assistances":"5"}]


},
{

 "champion": "Graves",
 "sex":"male",
 "lane":"marksam",
 "page":"#Graves",
 "score":[{"kills":"12", "mort":"4", "assistances":"1"}]
 
},
{

 "champion": "Leona",
 "sex":"female",
 "lane":"support",
 "page":"#Leona",
 "score":[{"kills":"2", "mort":"0", "assistances":"8"}]

},
{

 "champion": "Sona",
 "sex":"female",
 "lane":"support",
 "page":"#Sona",
 "score":[{"kills":"1", "mort":"4", "assistances":"17"}]

}



]

What should I do ? I need to orderBy kills (in score) and orderBy every 3 of theme directly.

Naveen Kohli

unread,
Aug 7, 2014, 2:22:22 PM8/7/14
to ang...@googlegroups.com
Check this out in documentation.


 "sex"<span style="
...

Awks Dine

unread,
Aug 7, 2014, 3:37:10 PM8/7/14
to ang...@googlegroups.com
thanks for the answer, I read the doc and it doesn't solve my problem, here is the problem.

if I order like this.
<option ng-click="order = 'sex'">sex</option>


It works, but If I order something in an array:

<option ng-click="order = 'score.kills'">kills</option>


It's not working, what should I do to reach this ?

"score":[{"kills":"1", "mort":"4", "assistances":"17"}] //look at the json file


Reply all
Reply to author
Forward
0 new messages