Geek Answers Handbook

How to show a specific element of an array alphabet in ng-repeat?

I have two arrays, one for alphabets and one for tags. Therefore, I want to show only the same elements of the alphabet in this particular category of the alphabet as an example - an apple should go into category A, and the zoo should go into category Z ...

link 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>

angular

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"];

}]);
+4
source share
3 answers

You can use filteras follows:

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;
    }	
  }
}]);
<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>
Run code
+4
source

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

+8

Use special filters in the second ng-repeat.

Using ng-show will create unwanted dom elements in the alpha group.

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"];

	
}]);

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>
Run code
+2
source

More articles:


All Articles