角度ng-repeatオブジェクト、if-else、キーの最初の文字

Question

アルファベットソートで都市のコレクションを取得しようとします。私は手紙なしでちょうどリスト都市カウントを取得 - は、私はできたことのアイテムをこのように取得

L 
Liverpool (1000) 
London (2000) 
M 
Manchester (500) 
N 
Newport (800) 
Northampton (90) 

最大たいので[{city: 'Liverpool', count: 1000, country: 'United Kingdom'}, ...]

に見えるオブジェクトのリストを持っています。 私は間違った方向に行っていると思いますが、私は正しいalgorytmについては考えていません。

jsFiddle：https://jsfiddle.net/valsaven/ysf56w48/

Answer 1

があなたのhtmlを更新し、あなた自身のfilterを作成します。

angular.module('app', []) 
 
    .controller('appCtrl', function($scope,$filter) { 
 
    $scope.cities = [{ 
 
     city: 'London', 
 
     count: 2000, 
 
     country: 'United Kingdom' 
 
    }, { 
 
     city: 'Liverpool', 
 
     count: 1000, 
 
     country: 'United Kingdom' 
 
    }, { 
 
     city: 'Manchester', 
 
     count: 500, 
 
     country: 'United Kingdom' 
 
    }, { 
 
     city: 'Newport', 
 
     count: 800, 
 
     country: 'United Kingdom' 
 
    }, { 
 
     city: 'Northampton', 
 
     count: 90, 
 
     country: 'United Kingdom' 
 
    }]; 
 
    $scope.cities = $filter('alphsort')($scope.cities); 
 
    }) 
 
    .filter('alphsort', function() { 
 
    return function(input) { 
 
     var result = {}; 
 
     angular.forEach(input, function(val, index) { 
 
     var key = val.city.charAt(0).toUpperCase(); 
 
     result[key] = result[key] || []; 
 
     result[key].push(val); 
 
     }); 
 
     return result; 
 
    } 
 
    });

<script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script> 
 
<div ng-app="app" ng-controller="appCtrl"> 
 

 
    <div> 
 
    <div ng-repeat="(alph,list) in cities track by alph"> 
 
     <ul> 
 
     <li> 
 
      <strong ng-bind="alph"></strong> 
 
     </li> 
 
     <li ng-repeat="item in (list | orderBy: 'city') track by $index"> 
 
      <p> 
 
      <a href="javascript:;" ng-bind="item.city"></a> 
 
      <span>({{item.count}})</span> 
 
      </p> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

角度フィルタを見

https://docs.angularjs.org/api/ng/filter/orderBy

次のようなものに設定することができます

<div ng-repeat="city in cities | orderBy : expression : reverse">