angularJsソーティングコードが機能しません

私は全く理解できません。なぜソートコードが機能しないのですか？私のアプリにソート方法 "sortFlag"を追加するだけで、正しく動作しません。あなたがどんな考えを持っている場合、このようなもので私を助けてくださいangularJsソーティングコードが機能しません

var App2 = angular.module('App2',[ 
    //submodules 
]); 

    App2.controller('MainController', ['$scope', '$http', function($scope, $http){ 
     $http.get('https://api.myjson.com/bins/14fug5') 
     .success(function(datas){ 
      $scope.datas_1 = datas 
      console.log($scope.datas_1.schema); 

     }); 
     $http.get('https://api.myjson.com/bins/q80it') 
     .success(function(datas){ 
      $scope.datas_2 = datas 
     }); 

     // $scope.predicate = ''; 
     // $scope.reverse = true; 
     // $scope.order = function(predicate) { 
     //  $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
     //  $scope.predicate = predicate; 
     // }; 

     $scope.sortFlag = 'id'; 
     $scope.sortTable = function(flag){ 
      $scope.sortFlag = flag; 
     } 

    }]);

<!DOCTYPE html> 
<html lang="ru" ng-app="App2"> 
<head> 
    <meta charset="UTF-8"> 
    <title>angular example 2</title> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 



<script 
     src="https://code.jquery.com/jquery-1.12.4.js" 
     integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 
     crossorigin="anonymous"></script> 


<div ng-init> 

    <form> 
     <div class="form-group"> 
      <div class="input-group"> 
       <div class="input-group-addon"><i class="fa fa-search"></i></div> 

       <input type="text" class="form-control" placeholder="Search" ng-model="searchFish"> 

      </div> 
     </div> 
    </form> 

<div ng-controller="MainController"> 
    <span>выберите данные:</span> 
    <span>данные1</span> 
    <input 
     name="content" 
     type="radio" 
     ng-model="content" 
     ng-init="content='first'" 
     value="first" 
    /> 
    <span>данные2</span> 
    <input 
     name="content" 
     type="radio" 
     ng-model="content" 
     value="second" 
    /> 


<table ng-show="content == 'first'"> 
    <tr> 
     <th ng-repeat="(key, value) in datas_1.schema"> 
      <button href="#" 
        ng-click="sortTable('{{key}}')"> 
        <!--ng-show="predicate === '{{key}}'"--> 
        <!--ng-class="{reverse:reverse}"--> 

       {{value}} 
      </button> 
     </th> 

     <!--<th>--> 
     <!--<button href="#"--> 
     <!--ng-click="order('{{key}}')"--> 
     <!--ng-show="predicate === '{{key}}'"--> 
     <!--ng-class="{reverse:reverse}">{{datas_1.schema.id}}</button>--> 
     <!--</th>--> 
    </tr> 
    <tr ng-repeat="data in datas_1.data | orderBy: sortFlag"> 
     <td>{{data.id}}</td> 
     <td>{{data.name}}</td> 
     <td>{{data.price}}</td> 
     <td>{{data.quantity}}</td> 
    </tr> 
</table> 

<table ng-show="content == 'second'"> 
    <tr> 
     <th ng-repeat="(key, value) in datas_2.schema"> 
      <button href="#" ng-click="order('{{key}}')">{{value}}</button> 
     </th> 
    </tr> 
    <tr ng-repeat="data in datas_2.data | orderBy: sortFlag"> 
     <td>{{data.id}}</td> 
     <td>{{data.name}}</td> 
     <td>{{data.price}}</td> 
     <td>{{data.quantity}}</td> 
    </tr> 
</table> 


    </div> 
</div> 
</body> 
</html>

：ここ

はコードです。

出典

2017-06-05 Balabukha

orderByがソートフィールドを使用するためにスコープ変数を使用できるかどうかはわかりません。代わりに関数を使うべきです。

コントローラ：

$scope.dynamicOrderFunction = function() { 
    return '-' + $scope.sortFlag; 
}

、変更することができます - あなたのソートの方向に応じてプラス記号と記号を。

テンプレート：boolean値に設定し、コントローラに

<tr ng-repeat="data in datas_2.data | orderBy:sortFlag:reverse">

をそして、あなたの関数へ：あなたはこのようにNGリピート何かであなたのORDERBYに別のパラメータ「逆」を追加する必要があり

<tr ng-repeat="data in datas_2.data | orderBy: dynamicOrderFunction"> 
    <td>{{data.id}}</td> 
    <td>{{data.name}}</td> 
    <td>{{data.price}}</td> 
    <td>{{data.quantity}}</td> 
</tr>

出典

2017-06-05 20:32:18

その逆のパラメータ

$scope.sortFlag = 'id'; 
$scopr.reverse = false; 
$scope.sortTable = function(flag){ 
    $scope.reverse = ($scope.sortFlag === flag) ? 
    !$scope.reverse : false; 
    $scope.sortFlag = flag; 
}

これは問題を解決するはずです。それがあなたのために働かないなら私に知らせてください。

出典

2017-06-05 20:35:22

angularJsソーティングコードが機能しません

答えて

関連する問題