ng-repeatに配列の特定のアルファベットの項目を表示する方法は？

Question

私は 例その特定のアルファベットのカテゴリに私は​​、同じアルファベットの項目を表示したい ...二つの配列のタグのアルファベットと第二のための1つを持っている - Appleはカテゴリーに来ており、動物園が入って来なければなりませんZカテゴリ...

フィドルリンクhttp://jsfiddle.net/4dGxn/149/

HTML

<div class="form-group" ng-controller="mainCtrl"> 
    <div ng-repeat="alp in alpha"> 
    <h2>{{alp}}</h2> 
    <ul> 
     <li ng-repeat="tag in tags">{{tag}}</li> 
    </ul> 
    </div> 
</div> 

角度

var app = angular.module("app", []); 

app.controller("mainCtrl", ['$scope', function($scope){ 

    $scope.alpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p","q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; 

    $scope.tags = ["apple", "dog", "cat", "dad", "baby", "zoo", "love", "hate", "rat", "room", "home", "age", "bad"]; 

}]); 

Answer 1

あるfilterこのように：

var app = angular.module("app", []); 
 

 
app.controller("mainCtrl", ['$scope', function($scope){ 
 

 
    $scope.alpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p","q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; 
 

 
    $scope.tags = ["apple", "dog", "cat", "dad", "baby", "zoo", "love", "hate", "rat", "room", "home", "age", "bad"]; 
 

 
    $scope.f = function(alp) { 
 
    return function(tag) { 
 
     return tag[0] == alp; 
 
    } \t 
 
    } 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="form-group" ng-app="app" ng-controller="mainCtrl"> 
 
    <div ng-repeat="alp in alpha"> 
 
    <h2>{{alp}}</h2> 
 
    <ul> 
 
     <li ng-repeat="tag in tags | filter:f(alp)">{{tag}}</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

あなたは要素はあなたの例ではそう特定の文字 で始まるかどうかを確認するためにstr.startsWithを使用することができます。ここでは

<div class="form-group" ng-controller="mainCtrl"> 
    <div ng-repeat="alp in alpha"> 
    <h2>{{alp}}</h2> 
    <ul> 
     <li ng-repeat="tag in tags" ng-show="{{tag.startsWith(alp)}}">{{tag}}</li> 
    </ul> 
    </div> 
</div> 

は、あなたが使用することができますwirking Fiddle

Answer 3

使用カスタムフィルタ、二NGリピートインチ

ng-showを使用すると、アルファグループ内の不要なDOM要素が作成されます。

var app = angular.module("app", []); 
 

 
app.controller("mainCtrl", ['$scope', function($scope){ 
 
\t 
 
    $scope.alpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p","q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; 
 
    
 
    $scope.tags = ["apple", "dog", "cat", "dad", "baby", "zoo", "love", "hate", "rat", "room", "home", "age", "bad"]; 
 

 
\t 
 
}]); 
 

 
app.filter('myfilter', function(){ 
 
    return function(input, text){ 
 
     // I recommend to use underscore lib for old browser. 
 
     return input.filter(function(item){ 
 
      // I recommend to use standard regex for old browser. 
 
      return item.startsWith(text); 
 
     }); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 

 
<div class="form-group" ng-controller="mainCtrl"> 
 
    <div ng-repeat="alp in alpha"> 
 
    <h2>{{alp}}</h2> 
 
    <ul> 
 
    <li ng-repeat="tag in tags | myfilter:alp">{{tag}}</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
    </div>