Question

嗨，我有一个需要过滤的数据表。我需要能够使用导航栏搜索框过滤数据，该搜索框位于将显示我的表数据的视图之外。我真的不确定怎么做。我的导航栏中有这个代码，搜索框应该是：

<div class="form-group">
                <input type="search" class="form-control" placeholder="Search" id="searchText" name="searchText" ng-model="query">
            </div>
            <div class="form-group">                    
                <!--<a class="btn default-btn lookupbtn" ng-href="#/lookup">Lookup</a>-->
                <button class="btn default-btn lookupbtn">Lookup</button>

我的表格数据目前如下：

<div>
<div>Lookup Results</div>
<!--<div><input type="text" id="searchText" name="searchText" ng-model="query" /></div>-->
<table ng-if="query">
    <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>

如何让导航栏搜索框与我视图中的表一起使用？如果需要任何其他信息，请告诉我。如果需要一个plnkr，请告诉我，我会制作一个。

Answer 1

实现这一目标的简单方法是使用$rootScope。当您将query变量添加到$ rootScope而不是本地$ scope时，它会在您的应用中随处可用，包括您的观看次数。

另一种选择是为特定目的使用服务。该服务将是一个存储query值的单例，并允许您在需要时设置/获取它。虽然通常被认为是比使用$rootScope更好的做法，但它更复杂。

导航栏中的AngularJS搜索框在视图

1 个答案: