Angular show checkbox checked filter

Question

I have a group object that contains a list of video And when you edit the object, i give the HTML a list of all videos, where you can search in.

But if you don't search I want it to show only the videos that are checked.

here is the HTML used

<div class="input-field">
    <input type="text" id="filter" ng-model="query" ng-change="hasVideos()" />
    <label for="filter"><i class="mdi-action-search"></i></label>
</div>

<ul class="collection">
    <li class="collection-item" ng-repeat="video in filterdVideo = (videos | filter:query) ">
        <p>
            <input type="checkbox" id="video_{{video.Id}}" checklist-model="group.Keywords" checklist-value="video.Id">
            <label for="video_{{video.Id}}">
                {{video.Title}}
            </label>
        </p>
    </li>
</ul>

So how can I make it that it only shows the video list where the checkbox is checked? and when the query isn't empty to ignore that and show all.

Jochen Schultz · Accepted Answer · 2015-03-02 10:39:08Z

0

I will try to improve my answer later.

But for a quick guess you might be able to use ng-if and let the controller handle if something should be listet.

<li ng-if="functionthatreturnstrueorfalsebasedonyourneeds" class="collection-item" ng-repeat="video in filterdVideo = (videos | filter:query) ">

Checkbox example can be found in the docs:

https://docs.angularjs.org/api/ng/directive/ngIf

answered Mar 2, 2015 at 10:39

Jochen Schultz

6517 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:51:05Z

0

Fixed it by doing a filter:

filter('filterStack', function () {
    return function (inputs, filterValues, showAll) {
        var output = [];
        if (showAll) return inputs;

        angular.forEach(inputs, function (input) {
            angular.forEach(filterValues, function (filterVal) {
                if (filterVal.Id == input.Id) {
                    output.push(input);
                }
            });
        });
        return output;
    };
})

but having an other issue now, when loading it in with data: https://stackoverflow.com/questions/29749006/angular-checklist-model-not-checking

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 20, 2015 at 14:16

Kiwi

2,7737 gold badges49 silver badges86 bronze badges

Collectives™ on Stack Overflow

Angular show checkbox checked filter

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related