Question

我的HTML页面中有一些自行车数据。我必须通过点击功能过滤该数据。我在文本框区域中使用了一个过滤器，但我希望通过点击功能获得相同的功能。

那么如何使用click函数绑定过滤器？

<div ng-app='app' class="filters_ct">
    <ul class="nav" ng-controller="selectFilter">
        <li ng-repeat="filter in filters" ng-click="select($index)" ng-class="{sel: $index == selected}">
            <span class="filters_ct_status"></span>
            {{filter.name}}

            <ul class="subul" ng-if=filter.lists.length>
                <li ng-repeat="list in filter.lists" ng-click=" $event.stopPropagation()">
                  <input type="checkbox">  {{list}}
                </li>
            </ul>
        </li>
    </ul>
    <input type="text" ng-model="search">
    <div ng-controller="listctrl">
        <div class="list" ng-repeat="list in lists | filter:{brand:search}">
            {{list.brand}}
            {{list.year}}
        </div>

        </div>

</div>

角

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

app.controller('selectFilter', function($scope) {

    $scope.filters = [
            {
                "name": "brand",
                'lists': ['yamaha','ducati','KTM','honda']
            },
            {
                'name': "year",
                'lists': [2012,2014,2015]
            }
        ];
    $scope.selected = 0;

    $scope.select= function(index) {
       if ($scope.selected === index) 
           $scope.selected = null
       else
           $scope.selected = index; 
    };
});


app.controller('listctrl', function($scope) {

    $scope.lists = [
            {
                "brand": "ducati",
                'year': 2012
            },
            {
                'brand': "honda",
                'year': 2014
            },
            {
                'brand': "yamaha",
                'year': 2015
            },
            {
                'brand': "KTM",
                'year': 2012
            }
        ];

});

Answer 1

在部分内部给定对象时，您已经知道如何使用过滤器。我移动了一个控制器，以便你有一个外部和一个内部控制器。

<div ng-app='app'ng-controller="MainCtrl as mainCtrl">

    <div ng-controller="listCtrl">

        <!-- your filter object is now accessible here -->
    </div>

</div>

我在外部控制器$scope.activeFilters中添加了一个范围变量（填写此内容，您应该可以自行完成，请参阅一个可能的解决方案。

单击复选框后，此对象现在已更改。现在可以从内部控制器访问$scope.activeFilters，我们可以像以前一样将它传递给过滤器：

<div class="list" ng-repeat="list in lists | filter:activeFilters">
     {{list.brand}}
     {{list.year}}
</div>

请注意，可能有更好的解决方案（使用带有模型的复选框等）。

工作人员： http://jsfiddle.net/ywfrbgoq/

过滤AngularJS中点击功能的数据

1 个答案: