多次元配列に（key、value）を使用すると、ng-repeatディレクティブソートが無効になります

私は多次元配列を持っています。多次元配列に（key、value）を使用すると、ng-repeatディレクティブソートが無効になります

{"rel":["aa","cc","bb"],"cst":["ff","ee","gg"],"mtm":["hh","jj","ii"]}

「REL」、「CST」および「MTM」以下の例のよう

は、フィルタ名として使用され、各フィルタは、表示される独自のリストを有することになります。

私の問題は、角度jsでng-repeatを使用するときに、フィルタをアルファベット順に並べ替えることです。

この問題を解決するための回避策が見つかりました。

マイソリューション：キーはちょうど最初の文字を削除して印刷する機能を使用して印刷中

は、以下の例

{"1rel":["aa","cc","bb"],"2cst":["ff","ee","gg"],"3mtm":["hh","jj","ii"]}

のようにフィルタ（キー）に整数を追加します。

<script> 
    angular.module('ngrepeat-sort-remove', []).controller('ngrepeat-sort', function($scope) {  

     $scope.ngtestrepeat = {"1rel":["aa","cc","bb"],"2cst":["ff","ee","gg"],"3mm":["hh","jj","ii"]}; 
     $scope.removenum =function(key){ 
      return key? key.substr(1) : ''; 
     }; 

    }); 

    </script> 


<body ng-app="ngrepeat-sort-remove" ng-controller="ngrepeat-sort"> 
<div class="ngtest" ng-repeat="(key, value) in ngtestrepeat ">  
    {{removenum(key)+'-Loop start'}}   
    <ul> 
     <li ng-repeat="row in value">{{row}} </li> 
    </ul> 

</div> 
</body>

この一般的な方法を作成する場合は、数字をアンダースコアで追加し、表示中に関数を使用して削除することができます。

マイ角度バージョン：誰がこれをよりよい解決策を持っている場合v1.3.14

親切にここに投稿。

出典

2017-06-16 manimaran vadivel

しかし、数字を前置せずに動作します。このhttp://plnkr.co/edit/0F1NdEQQuDtnrAfrKDiN?p=preview例。 –

角度バージョンでチェック：v1.3。14 –

ええ、あなたは正しいです私はこの問題のための私の答えを更新して助けになる希望。確認していただけますか？ –

<script> 
    angular.module('ngrepeat-sort-remove', []).controller('ngrepeat-sort', function($scope) {  

     $scope.ngtestrepeat = {"rel":["aa","cc","bb"],"cst":["ff","ee","gg"],"mm":["hh","jj","ii"]}; 
     $scope.keyArray=Object.keys($scope.ngtestrepeat); 

    }); 

    </script> 


<body ng-app="ngrepeat-sort-remove" ng-controller="ngrepeat-sort"> 
<div class="ngtest" ng-repeat="key in keyArray">  
    {{key+'-Loop start'}}   
    <ul> 
     <li ng-repeat="row in ngtestrepeat[key]">{{row}} </li> 
    </ul> 

</div> 
</body>

出典

2017-06-16 13:03:13

Not。それは[]です。 ngtestrepeat [key] –

これは一度keyArrayを生成するので、これは確かに良いです –

AngularJSバージョンup to and including 1.3 sort the keys alphabetically。

オプションとして、update to AngularJS 1.4+を試すことができます。これが許容できない場合は、オブジェクトをngRepeatに提供する前に好みの順序でソートされた配列に変換することをお勧めします。 toArrayFilterのようなフィルタを使用すると、これを手助けすることができます。

例：

angular.module('plunker', []) 
 
.controller('MainCtrl', function($scope, $filter) { 
 
    var ngtestrepeat = {"rel":["aa","cc","bb"],"cst":["ff","ee","gg"],"mm":["hh","jj","ii"]}; 
 
    
 
    $scope.ngtestrepeat = convertObjToArray(ngtestrepeat); 
 
    
 
    function convertObjToArray (obj) { 
 
    if (!angular.isObject(obj)) return obj; 
 
    return Object.keys(obj).map(function (key) { 
 
     var value = obj[key]; 
 
     return angular.isObject(value) ? 
 
      Object.defineProperty(value, '$key', { enumerable: false, value: key}) : 
 
      { $key: key, $value: value }; 
 
     }); 
 
    } 
 
});

<script src="https://code.angularjs.org/1.3.12/angular.js" ></script> 
 
<html ng-app="plunker"> 
 
    <body ng-controller="MainCtrl"> 
 
    <div class="ngtest" ng-repeat="item in ngtestrepeat">  
 
     {{item.$key}}<ul><li ng-repeat="row in item">{{row}}</li></ul> 
 
    </div> 
 
    </body> 
 
</html>

UPDATE：{{removenum(key)+'-Loop start'}}ようなバインディングの関数を使用すると、各$digestサイクルで呼び出すことと長い配列の場合には、それが遅い作ることができる機能removenumを行います/重い計算のため、あなたがパフォーマンスを気にするなら、これはお勧めできません。

出典

2017-06-16 13:09:31

私は確かにアップグレードされます、私は次のバージョンが私のコードを壊さないことを願っています –

このplunkr角度v 1.3.14のソリューションをご覧になれますか？テンプレートで

：コントローラで

<div class="ngtest" ng-repeat="key in objectKeys(ngtestrepeat)" ng-init="value = values[key]">  
    {{key}}<ul><li ng-repeat="row in objectValues(ngtestrepeat[key])">{{row}}</li></ul> 
</div>

：

$scope.ngtestrepeat = {"rel":["aa","cc","bb"],"cst":["ff","ee","gg"],"mm":["hh","jj","ii"]}; 
    $scope.objectKeys = function(obj){ 
    return Object.keys(obj); 
    } 
    $scope.objectValues = function(obj){ 
    return Object.values(obj); 
    }

出典

2017-06-16 13:49:04

多次元配列に（key、value）を使用すると、ng-repeatディレクティブソートが無効になります

答えて

関連する問題