在角度js中使用搜索功能

我正在嘗試使用AngularJS中的搜索功能（在Ionic框架中）。我有一個包含不同視圖和所有視圖的通用標題的模板。在每個視圖上，使用JSON顯示不同的列表。我想爲每個視圖使用搜索功能。如果我使用一個單一視圖上面的搜索form和ion-item在角度js中使用搜索功能

<form class="form-inline"> 
     <div class="form-group"> 
      <input type="text" ng-model="search" class="form-control" placeholder="Search"> 
     </div> 
</form> 

<ion-item class="item-button-right item-avatar item-icon-right item item-thumbnail-left" ng-repeat="text in texts|filter:search" type="item-text-wrap" href="#/otherContent/texts/{{text.id}}">

此代碼工作正常。但如果我在搜索欄中添加搜索表單並將<ion-item>標記放在其他頁面中，則不起作用。

我希望這有道理嗎？任何人都可以請建議我們如何實現這一點。我需要在標題中使用搜索欄，這對所有視圖來說都很常見，它應該在加載時搜索每個視圖。任何指針都是真正的讚賞。

來源

2015-11-26 Shruti

如果您有添加喜歡html或body標籤（如果沒有則定義了頂級控制器像GlobalController並將其添加到您的<html>或<body>標籤中，使我們能夠保持全球數據有和頂級控制器它的範圍可以是全球可訪問的應用範圍基本上我們試圖避免$rootScope使用和模仿$rootScope使用），然後定義在全域控制器空對象：。

$scope.globalModel = {};

然後，改變你的ng-model像：

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

最後修改您的搜索過濾器，如：

<ion-item class="item-button-right item-avatar item-icon-right item item-thumbnail-left" ng-repeat="text in texts|filter:globalModel.search" type="item-text-wrap" href="#/otherContent/texts/{{text.id}}">

以上應該工作。我們在這裏做的是在父範圍中定義一個對象，以便我們可以防止Angular Scopes Inheritance的問題。

來源

2015-11-26 13:07:53

非常感謝！非常棒！ :) – Shruti

在角度js中使用搜索功能

回答

相關問題