角度过滤具有过滤器阵列的多个列

时间:2016-05-25 11:10:56

标签: angularjs filter

我试图能够在多个值上过滤多个列。到目前为止,我可以在1个单值上过滤多个列:

myApp.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.empList = [];
    $http.get('getAllOnline.php')
        .success(function(data) {
            $scope.empList = data;
        });

    $scope.column1List = [];
    $http.get('getAllSomething.php', {
            params: {
                wuk: "column1"
            }
        })
        .success(function(data) {
            $scope.column1 = data;
        });


    $scope.column2List = [];
    $http.get('getAllSomething.php', {
            params: {
                wuk: "column2"
            }
        })
        .success(function(data) {
            $scope.column2 = data;
        });
    $scope.column3List = [];
    $http.get('getAllSomething.php', {
            params: {
                wuk: "column3"
            }
        })
        .success(function(data) {
            $scope.column3 = data;
        });

        $scope.setColumn1Value = function(val) {
    if ($scope.zelectedColumn1 == val) {
        $scope.zelectedColumn1 = undefined;
    } else {
        $scope.zelectedColumn1 = val;
    }
}
        $scope.setColumn2Value = function(val) {
    if ($scope.zelectedColumn2 == val) {
        $scope.zelectedColumn2 = undefined;
    } else {
        $scope.zelectedColumn2 = val;
    }
}
        $scope.setColumn3Value = function(val) {
    if ($scope.zelectedColumn3 == val) {
        $scope.zelectedColumn3 = undefined;
    } else {
        $scope.zelectedColumn3 = val;
    }
}

然后我用它来设置我的单值过滤器:

<ul id="Column1" class="collapse">
                                    <li ng-repeat="emp in empList  | unique:'Column1'">
                                        <a ng-click="setColumn1Value(emp.Column1);" ng-class="{selected: emp.Column1 === zelectedColumn1}">

                                            <div ng-repeat="someone in Column1List | filter:{Column1_id:emp.Column1}">
                                                {{someone.value}}
                                            </div>
                                        </a>
                                    </li>
                                </ul>

这很完美!但现在我希望能够过滤1列中的多个值。所以我将我的setter函数更改为:

 $scope.zelectedColumn1=[];
 $scope.setColumn1Value = function(val) {
        var found = jQuery.inArray(val,  $scope.zelectedColumn1);
if (found >= 0) {
    // Element was found, remove it.
    $scope.zelectedColumn1.splice(found, 1);
} else {
    // Element was not found, add it.
    $scope.zelectedColumn1.push(val);
}
console.log($scope.zelectedColumn1);
}

所以现在我在数组中添加或删除索引而不是存储单个值。这也有效,但是我如何在数组内容上过滤我的列,而不是像现在一样过滤单个值:

                                           <div class='row'>

                                          <div class='col-lg-2 col-md-3 col-sm-6' ng-repeat="emp in empList | filter:{column1:zelectedColumn1,column2:zelectedColumn2,column3:zelectedColumn3} as res">
<a href="folder/index.php?u={{emp.column1}}">{{emp.column1}}</a>
{{emp.column2}} <br>
{{emp.column3}} <br>
                                        </div>
                                    </div>

我一直在努力争取这一天,并希望有人可以帮助我在这里!

0 个答案:

没有答案