AngularJS 在应用过滤器后加载 table

Question

我想做一个搜索按钮，允许用户输入一些数据，然后加载包含他们搜索的数据的 table。我已经能够添加 table 并搜索 table，但我希望 table 在用户输入搜索然后单击按钮之前不可见。我不知道该怎么做。我在这里做了一个plnkr：http://plnkr.co/edit/qrVQ57iVBLV8AHn55I6P?p=preview

我有以下 table:

<div>
<div>Lookup Results</div>
<div><input type="text" id="searchText" name="searchText" ng-model="query" /></div>
<table>
    <thead>
        <tr>
            <td>Acc. ID</td>
            <td>Acc. Name</td>
            <td>Acc Address</td>
            <td>City</td>
            <td>Zip</td>
            <td>Phone</td>
            <td>Parent Name</td>
            <td>Account Type</td>
            <td>Account Status</td>
            <td>Credit Term</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="result in vm.results | filter:query ">
            <td>{{ result.accountId }}</td>
            <td>{{ result.accountName }}</td>
            <td>{{ result.address }}</td>
            <td>{{ result.city }}</td>
            <td>{{ result.state }}</td>
            <td>{{ reuslt.zip }}</td>
            <td>{{ result.phone }}</td>
            <td>{{ result.parentName }}</td>
            <td>{{ result.accountType }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.creditTerm }}</td>
        </tr>
    </tbody>
</table>

这是我的控制器。

(function () {

'use strict';

angular
  .module('crm.ma')
  .controller('LookUpCtrl', LookUpCtrl);

function LookUpCtrl() {
    var vm = this;

    vm.results = [
        {
            accountId: 1,
            accountName: 'some name',
            address: '201 some st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '899-629-7645',
            parentName: 'Parent 1',
            accountType: 'Type 1',
            accountStatus: 'Status 1',
            creditTerm: 'Term 1'
        },
        {
            accountId: 2,
            accountName: 'house home',
            address: '2963 this st',
            city: 'Columbus',
            state: 'OH',
            zip: 'zip',
            phone: '899-627-7592',
            parentName: 'Parent 2',
            accountType: 'Type 2',
            accountStatus: 'Status 2',
            creditTerm: 'Term 2'
        }
    ];


}
}());

谁能告诉我该怎么做？如果您甚至可以为我指明教程的方向，那将是非常有帮助的。

Answer 1

您可以将 ng-if 放在 table 上，这样 table 将不会在没有任何查询值的情况下存在

<table ng-if="query">

AngularJS 在应用过滤器后加载 table

AngularJS load table after filter is applied

angularjs

angularjs-filter