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

如果你为这些问题创建掠夺者会有所帮助。基本上，只需实现一个方法来使用ng-model更改属性的值，并将orderBy col设置为ng-model。

我已添加＆＃39;。＆＃39; 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

以角js对列进行排序

1 个答案: