AngularJS從導航欄中查找

我在我的頁面上有一個導航欄，其上有一個輸入，我想搜索一個視圖，在用戶輸入搜索項後應該在index.html中加載視圖。我只能弄清楚如何使用輸入進行搜索，如果它與ng-repeat項目所在的頁面在同一頁面中。是否有方法在視圖外部搜索表格？我創建了一個plnkr。它不起作用。我不知道如何使它工作。 http://plnkr.co/edit/nqChzn5OATNMeSZL7ItJ?p=preview AngularJS從導航欄中查找

下面是我的一些代碼：

導航欄

<input type="text" class="form-control" placeholder="Search" ng-model="vm.query">

這裏是我的表中的數據顯示在其中。

<table ng-if="query" class="table table-hover table-responsive" > 
     <thead>  
      <tr> 
       <th> 
        ({{filteredResults.length}}) Results Found 
       </th> 
      </tr>  
     <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 as filteredResults"> 
      <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> 
     </tr> 
    </tbody> 

</table>

是否有可能做我想做的事？

來源

2015-10-14 hollyquinn

我已經看過你的plunker，我不相信你的代碼沒有初始化角度。我在代碼中的任何地方都看不到ng-app標籤。

只要輸入和表格包含在您的ng-app和控制器的DOM部分中，那麼您就可以使用任何輸入來過濾/搜索（通過各種實現）。否則，您將無法訪問控制器。

我可以建議你提出你的問題嗎？給出顯示您的問題的最少量的代碼。

這裏有一個大致的輪廓：

<body ng-app="app" ng-controller="cntrl"> 
    <!-- nav bar --> 
    <div> 
     <input ng-model="filterVal"/> 
    </div> 
    <!-- table --> 
    <div> 
     <table> 
     <tr ng-repeat="r in data.rows | filter:filterVal">....</tr> 
     </table> 
    </div> 
</body>

這裏就是默認的過濾器功能正在開發一種plunker：http://plnkr.co/edit/GDJs5xTCpqq48SDFTk67

如果你需要讓你的導航欄你的應用程序/控制器的外部或在不同控制器（等），然後有解決這個問題。

假設使用的是UI的路線，這是如何使用服務控制器之間進行通信：

功能例如： http://plnkr.co/edit/fZZLUvlHO9zUFwQYd1an?p=preview

理論家視頻： https://egghead.io/lessons/angularjs-sharing-data-between-controllers

來源

2015-10-14 21:21:40 TobyGWilliams

不完全準確...可以使用示波器事件或服務在控制器之間進行通信 – charlietfl

同意，很多選項。 – TobyGWilliams

@TobyGWilliams我的例子來自一個更大的應用程序，它包含了ng-app和對angular的引用。實際的應用程序運行正常，我只是不知道如何在具有表格的視圖之外執行搜索欄。我只是忘了把它添加到我創建的plnkr中。無論如何你們中的任何一個都可以幫助我如何做到這一點的代碼？或者指向一個教程，說明如何做到這一點？ – hollyquinn

AngularJS從導航欄中查找

回答

相關問題