在角js中對列進行排序

Question

我想單擊按鈕時按升序排列列數據，但由於在我的json中嵌套的ng-repeat指令和嵌套對象，我無法做到這一點。我的Json數據是非常大的。我有點卡住了幾天現在。任何幫助將不勝感激。

JSON數據鏈路是 - json link

我的HTML看起來像這 -

<div class="container" > 
<div class="row searchbar">  
     <div class="col-xs-8 col-xs-offset-2"> 
      <div class="input-group"> 
       <div class="input-group-btn search-panel dropdown"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
         <span id="search_concept">Sort by<span class="caret"></span> 
        </button> 
        <ul ng-model="sortColumn" class="dropdown-menu" role="menu"> 
         <li><a >Team 1</a></li> 
         <li><a >Team 2</a></li> 
         <li><a >Score 1</a></li> 
         <li><a >Score 2</a></li> 
        </ul> 
       </div>  
       <input type="text" class="form-control" name="x" ng-model=filterField placeholder="Search term..."> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
       </span> 
      </div> 
     </div> 
    </div> 


     <table class="table table-striped" id="myTable"> 
      <thead > 

       <tr class="info "> 
        <th class="text-center">Match</th> 

        <th class="text-center">Team 1</th> 
        <th class="text-center">Score 1</th> 
        <th class="text-center">Team 2</th> 
        <th class="text-center">Score 2</th> 

       </tr> 
      </thead> 
      <div ng-controller="matchesController as matchCtrl"> 
      <tbody ng-repeat="match in matchCtrl.matchesData "> 
       <tr ng-repeat="mydata in match.matches | filter:filterField | orderBy:matchCtrl.orderProperty"> 
        <td class="text-center" >{{match.name |filter:matchname}}<br> 
         <span id="date">{{mydata.date | date:fullDate }}</span></td> 
         <td class="text-center" >{{mydata.team1.name | uppercase}}<br> 
          <span id="code">[{{mydata.team1.code}}]</span> 
         </td> 
         <td class="text-center">{{mydata.score1}}<span ng-show="mydata.score1 === null">Not Available</span></td> 
         <td class="text-center" >{{mydata.team2.name | uppercase}}<br> 
          <span id="code">[{{mydata.team2.code}}]</span> 
         </td> 
         <td class="text-center">{{mydata.score2}}<span ng-show="mydata.score2 === null">Not Available</span></td> 


        </tr> 

       </tbody> 

      </table> 
     </div> 


</div> 

我的控制器看起來像這 -

 myApp.controller('matchesController',['$http',function($http) { 

    //create a context 
    var match = this; 
    this.matchesData=[]; 
    this.loadAllMatches = function(){ 
    $http({ 
     method: 'GET', 
    url:'https://raw.githubusercontent.com/openfootball/football.json 
    /master/2016-17/en.1.json', 
    }).then(function successCallback(response) { 

    match.matchesData=response.data.rounds; 
    console.log(match.matchesData); 
}, function errorCallback(response) { 

    alert("some error occurred. Check the console."); 
    console.log(response); 

    }); 


    };// end load all blogs 

    this.loadAllMatches(); 


    }]); // end controller 

Answer 1

，如果你爲這些問題plunkers這將有助於。基本上，只需實現一種使用ng-model更改屬性值的方法，並將orderBy col設置爲ng-model。

我添加了'。'符號ng-model幫助確定範圍問題，因爲ng-repeat創建它自己的範圍。

試試這個：

<select name="singleSelect" ng-model="sorting.orderCol"> 
     <option value="name">Name</option> 
     <option value="age">Age</option> 
     <option value="phone">Phone</option> 
    </select> 

    <table class="friends"> 
    <tr> 
     <th>Name</th> 
     <th>Phone Number</th> 
     <th>Age</th> 
    </tr> 
    <tr ng-repeat="friend in friends | orderBy:sorting.orderCol"> 
     <td>{{friend.name}}</td> 
     <td>{{friend.phone}}</td> 
     <td>{{friend.age}}</td> 
    </tr> 
    </table> 

Plunker：https://plnkr.co/edit/Rh6TbmbIUkAjwMeevdP1?p=preview