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从导航栏中查找

回答

相关问题