Question

所以我已经使用过滤器进行了ng-repeat，效果很好！但当我加载它时，表中没有任何显示。在我应用过滤器之后，数据显示，当我删除过滤器（即查询）时，所有数据都显示在表格上。

所以我的问题是如何让表格显示所有数据，即内容，并且只在我在输入中写入时才应用过滤器....

谢谢！

<div class="container" ng-controller="AppCtrl">
        <h1>HearthDB</h1>
        Class: <input ng-model="classQuery">
        Cost: <input ng-model="costQuery">
        </br>
        Type "Spell/Minion": <input ng-model="typeQuery">
        Secret: <input ng-model="secretQuery">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Cost</th>
                    <th>Text</th>
                    <th>Class</th>
                </tr>  
            </thead>
            <tbody>
                <tr ng-repeat="content in data | filter:{playerClass: classQuery, cost: costQuery, type: typeQuery, text: secretQuery}" ng-if="content.collectible && content.cost">
                    <th>{{content.name}}</th>
                    <th>{{content.type}}</th>
                    <th>{{content.cost}}</th>
                    <th ng-bind-html="to_trusted(content.text)"></th>
                    <th>{{content.playerClass}}</th>
                </tr>
            </tbody>
        </table>

    </div>

Answer 1

嘿伙计们，这就是我解决问题所需要的。希望这有帮助

<div class="container" ng-controller="AppCtrl">
        <h1>HearthDB</h1>
        Class: <input ng-model="classQuery.playerClass">
        Cost: <input ng-model="costQuery.cost">
        </br>
        Type "Spell/Minion": <input ng-model="typeQuery.type">
        Secret: <input ng-model="secretQuery.text">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Attack</th>
                    <th>Health</th>
                    <th>Type</th>
                    <th>Cost</th>
                    <th>Text</th>
                    <th>Class</th>
                </tr>  
            </thead>
            <tbody>
                   <tr ng-repeat="content in data | filter: classQuery | filter: costQuery | filter: typeQuery | filter: secretQuery" ng-if="content.collectible && content.cost">

                    <th>{{content.name}}</th>
                    <th>{{content.attack}}</th>
                    <th>{{content.health}}</th>
                    <th>{{content.type}}</th>
                    <th>{{content.cost}}</th>
                    <th ng-bind-html="to_trusted(content.text)"></th>
                    <th>{{content.playerClass}}</th>
                </tr>
            </tbody>
        </table>

    </div>

Angular ng-repeat在应用过滤器之前显示数据

1 个答案: