Question

我有一个包含子阵列的对象（用户）列表

[{
  name:'username',
  offer: [1,5,123,12]
},
{
  name:'username2',
  offer: [1,3,13,212]
}]

我有一个复选框列表（500个元素，按手风琴列表分组）

<div ng-repeat="item in offers">
    <label>
        <input type="checkbox" 
            ng-model="search.offer[item.id]" 
            ng-true-value="{{item.id}}" 
            ng-false-value="undefined" /> 
        {{item.name}} </label>
</div>

现在，我想要做的只是显示具有已检查属性的用户。这是带有offerFilter的ng-repeat部分

<div class="col-sm-6 col-md-4" ng-repeat="profile in profiles | filter: search | offerFilter">
                <div class="thumbnail">
                    <img src="media/sezon_lowerq.jpg" alt="image">
                    <div class="caption" style="height:7em">
                        <strong ng-if="profile.name">{{ profile.name }}</strong>
                        <span ng-if="profile.lastname">{{ profile.firstname }} {{ profile.lastname }}</span>
                        <br>
                        <a href="#/profile/{{ profile.id }}" class="btn btn-default btn-sm">Read more</a>
                    </div>
                </div>
            </div>

offerFilter看起来像这样

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

myFilters.filter('offerFilter', function() {
    return function(items) {

        var results = [];
        if (items) {
            for (var i = 0; i < items.length; i++) {
                if(items[i].offer.length>0 && items[i].offer!=0){
                    for (var j = 0; j < items[i].offer.length;j++){
                        var value = items[i].offer[j];

                        if (results.indexOf(value) == -1) {
                            results.push(value);
                        }
                    }
                }
            }
            return results;
        } else {
          return 'Doh!';
        }
   }
})

问题是，当我检查一个复选框时（例如，值为“1”），所有内容都会隐藏。

Answer 1

我找到了使用ng-change和ng-show指令的解决方案

$scope.offertest = function(){
        angular.forEach($scope.profiles,function(profile,$index){
            profile.offertest = true;   
        });

        angular.forEach($scope.searchoffer,function(item,key){
            if(item){
                var keepGoing = true;
                angular.forEach($scope.profiles,function(profile,$index){
                    if(keepGoing){
                        if(profile.offer.length>0 && profile.offer!=0){ 
                            if(profile.offer.indexOf(item)==-1){
                                profile.offertest = false;  
                                keepGoing = false;
                            }
                        }
                        else {
                            profile.offertest = false;
                        }
                    }
                });
            }
            else {
                delete $scope.searchoffer[key];
            }
        });
    }

复选框现在有ng-change指令。 search.offer现在是searchoffer。

<input type="checkbox" 
    ng-model="searchoffer[item.id]" 
    ng-change="offertest()"
    ng-true-value="{{item.id}}" 
    ng-false-value="0" /> 
    {{offer.name}} </label>

用户列表

<div class="col-sm-6 col-md-4" ng-repeat="profile in profiles | filter: search"` ng-show="profile.offertest">..</div>

它有效，但可能有更好的解决方案......

通过复选框对角度过滤ng-repeat子阵列

1 个答案: