Question

我有一个包含视频列表的组对象当您编辑对象时，我会为HTML提供所有视频的列表，您可以在其中进行搜索。

但如果您不进行搜索，我希望它只显示已检查的视频。

这是使用的HTML

<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>

那么如何才能使它只显示选中复选框的视频列表？当查询不为空时忽略并显示全部。

Answer 1

我稍后会尝试改进我的答案。

但是为了快速猜测你可能能够使用ng-if并让控制器处理是否应该监听。

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

复选框示例可以在文档中找到：

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

Answer 2

通过过滤器修复它：

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;
    };
})

但现在有另一个问题，当加载数据时：https://stackoverflow.com/questions/29749006/angular-checklist-model-not-checking

Angular show复选框选中过滤器

2 个答案: