AngularJS A-Z 过滤器

Question

我已经使用 ng-repeat http://wojtek1150.pl/files/screens/2015_03_29__22-14-19.png 创建了那个表

而且我必须创建过滤器来显示所有以 A、B 或 C 或……字母开头的记录。我尝试使用 ng-click 过滤器，但它显示的记录在某处过滤了字母。 有什么建议吗？

最好的问候，W

@编辑

我使用的所有代码

JS:

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {

    $scope.temp = [
        <?php $query = new WP_Query( array('post_type' => 'exhibitors', 'posts_per_page' => -1, 'order' => 'ASC')); ?>
        <?php $i = 0; if($query->have_posts()) : while($query->have_posts()): $query->the_post();
        $categories = get_the_terms( $post->ID, 'company_category' ); $cat_list = array(); foreach ( $categories as $cat ) { $cat_list[] = $cat->name; };
        $countries = get_the_terms( $post->ID, 'country' ); $ctr_list = array(); foreach ( $countries as $ctr ) { $ctr_list[] = $ctr->name; };
            echo "{";
            echo "ID: '" . $i . "',";
            echo "title: '" . get_the_title($post->ID) . "',";
            echo "content: '" . get_the_content($post->ID) . "',";
            echo "stand: '" . get_field('stand') . "',";
            echo "category: '" . $cat_list[0] . "',";
            echo "country: '" . $ctr_list[0] . "',";
            echo "},";           
        $i++; endwhile; endif; ?>   
    ];  

    $scope.selects = [ 
        <?php $query = new WP_Query( array('post_type' => 'exhibitors', 'posts_per_page' => 2, 'order' => 'ASC')); ?>
        <?php $i = 0; if($query->have_posts()) : while($query->have_posts()): $query->the_post();
        $categories = get_the_terms( $post->ID, 'company_category' ); $cat_list = array(); foreach ( $categories as $cat ) { $cat_list[] = $cat->name; };
        $countries = get_the_terms( $post->ID, 'country' ); $ctr_list = array(); foreach ( $countries as $ctr ) { $ctr_list[] = $ctr->name; };
            echo "{";
            echo "ID: '" . $i . "',";
            echo "title: '" . get_the_title($post->ID) . "',";
            echo "content: '" . get_the_content($post->ID) . "',";
            echo "stand: '" . get_field('stand') . "',";
            echo "category: '" . $cat_list[0] . "',";
            echo "country: '" . $ctr_list[0] . "',";
            echo "},";           
        $i++; endwhile; endif; ?>   
    ];

    $scope.loadMore = function() {
      var last = $scope.selects.length - 1;
      for(var i = 1; i <= 1; i++) {
        var ar_id = $scope.temp[last].ID;
        var ar_title = $scope.temp[last].title;
        var ar_contnet = $scope.temp[last].content;
        var ar_stand = $scope.temp[last].stand;
        var ar_category = $scope.temp[last].category;
        var ar_country = $scope.temp[last].country;

        $scope.selects.push({
            ID: ar_id,
            title: ar_title,          
            content: ar_content,          
            stand: ar_stand,          
            category: ar_category,          
            country: ar_country,          
        });
      }
    };  

    $scope.alphabets = ["", "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", "#"];
    //used with ng-click
    $scope.select = function ($index) {
        $scope.selected = $scope.alphabets[$index];
    }
    // used in filter
    $scope.startsWithSelected = function (value, index) {
        if ($scope.selected) {
            return value[0].toLowerCase() === $scope.selected.toLowerCase();
        } else {
            return true;
        }

    }

});

myApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

查看:

<div id="exhibitors_table" ng-controller="DemoController" class="my-controller">
                <div class="search_box"><label for="search">Keyword</label><input id="search" ng-model="search"></div>
                <div class="row">
                    <div class="col-sm-6">
                        <select ng-model="cats"
                                ng-options="select.category for select in selects">
                            <option value="">Category</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <select ng-model="ctrs"
                                ng-options="select.country for select in selects">
                            <option value="">Country</option>
                        </select>
                    </div>
                </div>

                <div class="alphabet">
                    <span ng-repeat="alphabet in alphabets">
                        <a ng-click="select($index)">{{alphabet}}<span>All</span></a>
                    </span>
                </div>
                <div ng-repeat="word in words | filter:startsWithSelected">
                    {{word}}
                </div>

                <table>
                    <thead>
                        <tr>
                            <td>Company</td>
                            <td>Stand</td>
                            <td>Category</td>
                            <td>Links</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="select in selects | filter:search | filter:cats | filter:ctrs | filter:startsWithSelected">
                            <td>
                                <span class="toggle" ng-click="showme=true" ng-hide="showme">+</span>
                                <span class="toggle" ng-click="showme=false" ng-show="showme">-</span>
                                <h4 ng-bind-html="select.title | unsafe"></h4>
                                <div ng-show="showme" class="txt" ng-bind-html="select.content | unsafe"></div>
                            </td>
                            <td>{{select.stand}}</td>
                            <td>{{select.category}}</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>            
            </div>

此外，我在选择框方面遇到了问题。当我单击“类别”或“国家/地区”时，请重置过滤器。所有记录都消失了:/

Answer 1

请看下面的演示，你只需要根据你的情况调整一个位过滤器，目前正在检查属性名称是否以要求的字母开头，但在你的情况下它可以是 company 或 stand ..

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

app.controller('firstCtrl', function($scope) {
  var str = "abcdefghijklmnopqrstuvwxyz";
  $scope.alphabet = str.toUpperCase().split("");

  $scope.activeLetter = '';

  $scope.activateLetter = function(letter) {


    $scope.activeLetter = letter
  }

  $scope.users = [{
    name: 'Andrew'
  }, {
    name: 'Mike'
  }, {
    name: 'Tony'
  }, {
    name: 'Jim'
  }, {
    name: 'Leo'
  }];

});


app.filter('startsWithLetter', function() {
  return function(items, letter) {

    var filtered = [];
    var letterMatch = new RegExp(letter, 'i');
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (letterMatch.test(item.name.substring(0, 1))) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

.active {
  color: Red
}
.filter li {
  display: inline;
  padding: 5px;
}
ul {
  list-style-type: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <ul class="filter">
      <li ng-click="activateLetter('')" ng-class="{'active':activeLetter==''}">ALL</li>
      <li ng-repeat="letter in alphabet track by $index " ng-click="activateLetter(letter)" ng-class="{'active':letter==activeLetter}">{{letter}}</li>


    </ul>





    <div ng-repeat="user in users | startsWithLetter : activeLetter">
      {{user.name}}
    </div>

  </div>
</body>