Question

我在我的范围内有一个数组中的项目列表。在我的视图中重复使用ng重复。现在基于点击事件，我想过滤数组以显示全部或仅显示我的项目。这是最好的方法吗？

这是我想用来在这两个数组之间切换的按钮：

<div class="btn-group btn-group-custom1">
  <label class="btn btn-sm" ng-click="pL.myitems()" uib-btn-radio="'Middle'">Just mine</label>
  <label class="btn btn-sm" ng-click="pL.allitems()" uib-btn-radio="'Right'">All itmes</label>
</div>

在我的控制器中创建对象我额外创建一个备份范围变量，所以我总能找回原始数组（$ scope.items _all）。

我这样尝试，不幸的是没有成功：

$scope.pL = {
        myitems: function () {
            $scope.items = $filter('filter')($scope.item_filter, { agent: uid });
        },
        allitems: function () {
            $scope.items = $scope.items_all;
        }
    };

Answer 1

你想要的是filter。使用过滤器，您可以定义一个函数，当传递数组时，它将根据需要返回数组，而不必丢失原始数据（并且在视图中易于使用和重用）。

示例：

angular.module('yourModule')
.filter('arbitraryFilter', [function () {
        return function (inputArray, filterArray) {
            if(!filterArray) return inputArray; //This will return the unfiltered array.
            var resultArray = [];
            for(var i=0;i<inputArray.length;i++)
                if(inputArray[i].someProperty === 'property to include')
                    resultArray.push(inputArray[i]);
            return resultArray;
        };
    }])
.controller('yourController',['$scope', function($scope){
    $scope.filterArray = false;
    $scope.toggleFilterArray = function(){ $scope.filterArray = !$scope.filterArray;};
}])

在您看来：

<div ng-click="toggleFilterArray()">Toggle array filter</div>
<div ng-repeat="item in yourArray | arbitraryFilter:filterArray ">item.value</div>

作为最后一条评论，我严重建议您不要在AngularJS应用中使用jQuery。有关于为什么你不应该混合它们的全文，我诚实地建议你删除你已经包含的任何jQuery并以Angular方式重做它。

Answer 2

另一种实施方式;

<div ng-repeat="item in items | filter: uid as results">

在javascript中：

$scope.pL = {
    myitems: function () {
        $scope.uid = 101 ; //enter your uid
     });
    },
    allitems: function () {
        $scope.uid = ""; //all
    }
};

单击按钮替换$ scope.items

2 个答案: