Question

我已经使用ng-repeat http://wojtek1150.pl/files/screens/2015_03_29__22-14-19.png

创建了该表

我必须创建过滤器，向我显示所有记录从A，B或C或...字母开始。我尝试使用ng-click过滤器，但它显示了具有某处过滤字母的记录。有什么建议吗？

最好的问候，W

@edit

我使用的所有代码

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>

我也有选择框的问题。当我点击＆＃34;类别＆＃34;或＆＃34;国家＆＃34;做重置过滤器。所有记录都消失了：/

Answer 1

请参阅下面的演示，您只需要根据您的情况调整位过滤器，目前正在检查属性名称是否从要求的字母开始，但在您的情况下，它可以是公司或站点。。

＆＃13;

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;
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您尝试使用angular的内置过滤器，您可以向控制器添加一个函数并将其传递给过滤器以比较数组中的每个值，在此示例中，startWithSelected是控制器中的一个函数。将显示任何返回true的内容。

查看

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

控制器

$scope.alphabets = ["A", "B", "C"];
$scope.words = ["aaaaa", "Abaaa", "abaa", "aac", "baba", "bbbb", "cccc", "cbc"]
//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;
    }

}

修改

我看到你正在处理你应该改变的对象，startWithSelected to

// used in filter
$scope.startsWithSelected = function (value, index) {
    if ($scope.selected) {
        return value.title[0].toLowerCase() === $scope.selected.toLowerCase();
    } else {
        return true;
    }

}

AngularJS A-Z过滤器

2 个答案: