【问题标题】:How to filter results based on checkbox selection in angular如何根据角度中的复选框选择过滤结果
【发布时间】:2016-08-15 19:07:43
【问题描述】:

我有 3 个复选框,我想根据复选框的选择过滤我的结果列表。我正在形成一个选择数组并使用角度应用了过滤器,但是当我单击一个复选框时,结果或列表消失了

HTML

<div class="row" ng-controller="DataCtrl">
    <div class="col-sm-4">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="US" ng-click="select('US')">
                US
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="UK" ng-click="select('UK')">
                UK
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="Australia" ng-click="select('Australia')">
                Australia
            </label>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="well" ng-repeat="eve in events | filter : selected_country">
            <h3>{{eve.title}}</h3>
            <h5>{{eve.country}}</h5>
        </div>
    </div>
</div>

控制器

refine.controller('DataCtrl', function($scope){
$scope.selected_country = [];
$scope.events = [
    {
        'title' : 'Global Warming 2016',
        'country' : 'US'
    },
    {
        'title' : 'Global Warming 2017',
        'country' : 'UK'
    },
    {
        'title' : 'Global Warming 2018',
        'country' : 'Australia'
    }
];

$scope.select = function(country){
    var index = $scope.selected_country.indexOf(country);
    var country_exists = (index > -1);
    if(country_exists == false){$scope.selected_country.push(country);}
    else{ $scope.selected_country.splice(index, 1);}
    console.log($scope.selected_country);
}

});

【问题讨论】:

    标签: javascript angularjs checkbox filter angularjs-ng-model


    【解决方案1】:

    看来你的条件写错了,试试改

    if(country_exists == false){$scope.selected_country.push(country);}

    if(country_exists == true){$scope.selected_country.push(country);}

    【讨论】:

    • 这种情况很好,虽然我确实更新了函数以使其正常工作
    • 过滤器仍未应用,数组推送和弹出工作正常
    • 你可以创建一个 plnk 或笔吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-10-10
    • 1970-01-01
    • 2020-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多