AngularJS搜索框

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而不是您的本地$範圍時，它將在您的應用程序中隨處可用，包括您的視圖。

另一種選擇是使用一個服務於特定的目的。該服務將是一個存儲query值的單身人士，並允許您在需要時設置/獲取它。雖然通常認爲比使用$rootScope更好，但它更復雜。